Adăugarea și eliminarea Nodes (HTML Elements)
Crearea de noi elemente HTML (Nodes)
Pentru a adăuga un nou element HTML DOM, trebuie să creați elementul (element node) în primul rând, și apoi adăugați - l la un element existent.
Exemplu
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Încearcă - l singur » exemplu explicat
Acest cod creează un nou <p> Element:
var para = document. createElement("p") ;
Pentru a adăuga text la <p> elementul, trebuie să creați un nod de text mai întâi. Acest cod creează un nod de text:
var node = document. createTextNode("This is a new paragraph.") ;
Apoi , trebuie să adăugați nodul text la <p> elementul:
para. appendChild(node) ;
În cele din urmă trebuie să adăugați noul element la un element existent.
Acest cod găsește un element existent:
var
element = document. getElementById("div1") ;
Acest cod adaugă noul element la elementul existent:
element. appendChild(para) ;
Crearea de noi elemente HTML - insertBefore()
appendChild() metoda în exemplul anterior, anexat noul element ca ultimul copil al părintelui.
Dacă nu doriți să puteți utiliza insertBefore() metoda:
Exemplu
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Încearcă - l singur » Eliminarea elementelor HTML existente
Pentru a elimina un element HTML, trebuie să știți părintele elementului:
Exemplu
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Încearcă - l singur » Metoda node. remove() node. remove() este implementat în specificația DOM 4.
Dar, din cauza sprijinului săraci browser-ul, ar trebui să nu-l utilizați.
exemplu explicat
Acest document HTML conține un <div> Element cu două noduri copil (două <p> elemente):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Găsiți elementul cu id="div1" :
var parent = document. getElementById("div1") ;
Găsiți <p> elementul cu id="p1" :
var child = document. getElementById("p1") ;
Scoateți copilul din mamă:
parent. removeChild(child) ;
Ar fi frumos să fie capabil de a elimina un element, fără a face referire la mamă.
Dar îmi pare rău. DOM trebuie să știe atât elementul pe care doriți să îl eliminați, și societatea mamă.
Aici este o soluție comună: Găsiți copilul pe care doriți să îl eliminați, și de a folosi proprietatea parentNode pentru a găsi mamă:
var child = document. getElementById("p1") ;
child.parentNode. removeChild(child) ;
Înlocuirea Elemente HTML
Pentru a înlocui un element HTML DOM, utilizați replaceChild() metoda:
Exemplu
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Încearcă - l singur »