JavaScript HTML DOM 元素（节点）

Kuingia na kusiringia kitengo (elementi ya HTML)

Kuwa na elementu ya HTML kipya (kitengo)

Kufa tukue elementu ya HTML kwa sababu ya kuongeza kwenye HTML DOM, lazima uweza kuwa na elementu huo (kitengo cha elementu), kisha unafanya kuingia kwenye elementu ya hivi karibuni.

Mfano

<div id="div1">
<p id="p1">Ni mtaani hiki.</p>
<p id="p2">Ni mtaani mwingine.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Ni mtaani mpya.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Jifunze kwa kufikia

matokeo wa mifano

Maelezo hii inaunda mchezo mpya mpya. <p> elementi:

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

Kwa kuingiza <p> Kwa kuingiza mchezo wa kina kwa elementi, lazima uchukue mchezo wa kina wa kawaida kwanza. Maelezo hii inaunda mchezo wa kina:

var node = document.createTextNode("Hii ni mchezo mpya.");

Kisha inafaa kuongeza mchezo hii kwa <p> Kuingiza mchezo wa kina kwa elementi hii:

para.appendChild(node);

Kisha inafaa kuongeza mchezo hii mpya kwa elementi hii ya kawaida.

Maelezo hii inakufaa kufaa kipakusha kina zilizotumika:

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

Maelezo hii inaongeza mchezo mpya kwa elementi hii ya kawaida:

element.appendChild(para);

Kupata mchezo mpya wa HTML - insertBefore()

Mifano ya kwanza ya hii appendChild() method, kuongeza mchezo mpya kama mchezo wa kwanza wa kipakusha.

Kwa sababu ya hii, inaweza kutumia insertBefore() Makusanyiko ya uwanja:

Mfano

<div id="div1">
<p id="p1">Ni mtaani hiki.</p>
<p id="p2">Ni mtaani mwingine.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Ni mtaani mpya.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Jifunze kwa kufikia

kufa kipakusha kina zilizotumika

Kwa kufa kipakusha HTML, tafadhali tumie remove() Makusanyiko ya uwanja:

Mfano

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

Jifunze kwa kufikia

matokeo wa mifano

Hii HTML kifaa kinaa kipakusha kipya kumi na kipya kumi (kipakusha kumi na kipya kumi) <p> kipakusha) ya <div> elementi:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

Kufaa kipakusha kinachotokana:

const elmnt = document.getElementById("p1");

Kisha tafadhali tukue mchezo hii remove() Makusanyiko ya uwanja:

elmnt.remove();

Taradhisya:Hata hivyo, method ya remove() hufaa kawaida kwa kina za kawaida, tafadhali angalia mifano iliyotunza, kueleza jinsi ya kutumia removeChild()。

kufa kipakusha

kwa sababu inayotumika kwa kina za kawaida, hata hivyo hufaa kuwaambia kwa mifano iliyotunza, kueleza jinsi ya kutumia remove() Kwa sababu inayotumika kwa kina ya kawaida wa ingawa, lazima uchukue kipakusha kipya kwa kufa kueleza elementi:

Mfano

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Jifunze kwa kufikia

matokeo wa mifano

Hii HTML kifaa kinaa kipakusha kipya kumi na kipya kumi (kipakusha kumi na kipya kumi) <p> kipakusha) ya <div> elementi:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

kufaa id="div1" kipakusha:

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

kufaa id="p1" kwa <p> elementi:

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

Kuondoa mchezo kutoka kipakusha:

parent.removeChild(child);

Hii ni inayopendekeza huzina: kufaa kipakusha kinachotokana, na kuitumia parentNode 属性kufaa kipakusha kina:

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

Kuondoa kipengeza cha HTML

Kuondoa elementi, tumia replaceChild() Makusanyiko ya uwanja:

Mfano

<div id="div1">
<p id="p1">Ni mtaani hiki.</p>
<p id="p2">Ni mtaani mwingine.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Ni mtaani mpya.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Jifunze kwa kufikia