1. Casa
  2. elementi DOM JavaScript HTML

Il miglior tutorial elementi DOM JavaScript HTML Nel 2024, in questo tutorial puoi imparare Creare un nuovo elemento HTML,Esempi,Esempi di analisi:,Rimuovere gli elementi HTML esistenti,Esempi,Esempi di analitica,HTML DOM Tutorial,

elementi DOM JavaScript HTML

Creare un nuovo elemento HTML

Creare un nuovo elemento HTML

Per aggiungere un nuovo elemento al DOM HTML, è necessario creare l'elemento (un nodo di elemento), e quindi aggiungere l'elemento ad un elemento esistente.

Esempi

<Div id = "div1">
<P id = "p1"> Questo è un paragrafo. </ P>
<P id = "p2"> Questo è un altro punto. </ P>
</ Div>

<Script>
var para = document.createElement ( "p");
nodo var = document.createTextNode ( "Questo è un nuovo paragrafo.");
para.appendChild (nodo);

elemento var = document.getElementById ( "div1");
element.appendChild (para);
</ Script>

Prova »

Esempi di analisi:

Questo codice crea un nuovo elemento <p>:

var para=document.createElement("p");

Per aggiungere testo all'elemento <p>, è necessario innanzitutto creare un nodo di testo. Questo codice crea un nodo di testo:

nodo var = document.createTextNode ( "Questo è un nuovo paragrafo.");

Quindi è necessario aggiungere questo nodo di testo per l'elemento <p>:

para.appendChild (nodo);

Infine, è necessario aggiungere questo nuovo elemento per un elemento esistente.

Il codice per trovare un elemento esistente:

elemento var = document.getElementById ( "div1");

Il seguente codice dopo gli elementi esistenti aggiungere un nuovo elemento:

element.appendChild (para);

Rimuovere gli elementi HTML esistenti

Il codice seguente illustra come eliminare gli elementi:

Esempi

<Div id = "div1">
<P id = "p1"> Questo è un paragrafo. </ P>
<P id = "p2"> Questo è un altro punto. </ P>
</ Div>

<Script>
var parent = document.getElementById ( "div1");
var bambino = document.getElementById ( "P1");
parent.removeChild (bambino);
</ Script>


Prova »

Esempi di analitica

Il documento HTML che contiene i nodi figlio hanno due (due <p> elemento) dell'elemento <div>:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Trova id = elementi "div1":

var parent = document.getElementById ( "div1");

Trova id = del <p> elemento "P1":

var child=document.getElementById("p1");

Togliere dal sotto-elementi elemento genitore:

parent.removeChild(child);

lampada Se è possibile rimuovere un elemento senza un riferimento all'elemento genitore, sarebbe bello.
Ma purtroppo. elementi DOM che è necessario sapere per essere cancellato, così come suo elemento genitore.

Si tratta di una soluzione comune: trovare l'elemento figlio che si desidera eliminare, e quindi utilizzare le sue proprietà per trovare parentNode elemento padre:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

HTML DOM Tutorial

Nella parte HTML DOM del nostro tutorial JavaScript, avete imparato:

  • Come cambiare il contenuto dell'elemento HTML (innerHTML)
  • Come cambiare lo stile di elementi HTML (CSS)
  • Come reagire agli eventi sul DOM HTML
  • Come faccio ad aggiungere o rimuovere elementi HTML

Se volete saperne di più su come utilizzare JavaScript per accedere alla conoscenza HTML DOM, si prega di visitare il nostro completo tutorial di HTML DOM .

Tutorial caldi

Contattaci

elementi DOM JavaScript HTML
10/30