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
<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>:
Per aggiungere testo all'elemento <p>, è necessario innanzitutto creare un nodo di testo. Questo codice crea un nodo di testo:
Quindi è necessario aggiungere questo nodo di testo per l'elemento <p>:
Infine, è necessario aggiungere questo nuovo elemento per un elemento esistente.
Il codice per trovare un elemento esistente:
Il seguente codice dopo gli elementi esistenti aggiungere un nuovo elemento:
Rimuovere gli elementi HTML esistenti
Il codice seguente illustra come eliminare gli elementi:
Esempi
<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>:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
Trova id = elementi "div1":
Trova id = del <p> elemento "P1":
Togliere dal sotto-elementi elemento genitore:
 | 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:
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 .
