L8-dom Operating applications

Dom Create, insert, delete elements

DOM Create element

　　createelement Create a node (sign)

　　appendchild(child node) append a node

Example: inserting LI for UL

<ul id = "UL1" ></ul>

var Oul = document.getElementById ("Ul1");

var oLi = document. createelement ("Li");

Oul. appendchild (OLi);

inserting elements

insertbefore(child element, original node) inserted before an existing element

Example: Imitation Weibo release

<input type = "text" id = "Txt1"/>

<input type = "button" id = "BTN1" value = "Publish"/>

<ul id = "UL1" style = "width:200px; min-height:100px; border:1px solid #999; " ></ul>

var otxt = document.getElementById ("Txt1");

var obtn = document.getElementById ("btn1");

var Oul = document.getElementById ("Ul1");

var aLi = document.getelementsbytagname ("Li");

Obtn.onclick = function () {

var oLi = document.createelement ("Li");

oli.innerhtml = Otxt.value;

if (ali.length>0) {

Oul. InsertBefore (Oli,ali[0]);

Otxt.value = "";

}

else{

Oul. appendchild (OLi);

Otxt.value = "";

Otxt.focus ();

}

}

Delete DOM elements

　　RemoveChild (child node) Delete a node

Example: Delete entire li (similar to parentnode 's example)

<ul id = "UL1" >

<LI>AFAAFSF <a href= "javascript:;" ></a><li>

<li>asdfdsf<a href= "javascript:;" ></a><li>

<li>sfccda<a href= "javascript:;" ></a><li>

<li>sefeaf<a href= "javascript:;" ></a><li>

<li>ewre<a href= "javascript:;" ></a><li>

</ul>

var Oul = document.getElementById ("Ul1");

var AA = Oul.getelementsbytagname ("a");

for (var i = 0; I <aA.length; i++) {

Aa[i].onclick = function () {

Oul. RemoveChild (this.)　　parentnode); This.parentnode The parent node of the current node

}

}

The last one that is less exposed to the document fragment.

What's the use of createdocumentfragment ?

Draw the page multiple times using a node method (such as AppendChild), and refresh the page one at a time. Efficiency is compromised, and the use of
Document.createdocumentfragment () Creates a fragment of the document, attaches all the new nodes to it, and then adds the contents of the document fragment to the file one at a time, which only requires a single page refresh.

This approach has the effect of improving the performance of DOM operations on low-version browser ie6-7, but does not improve on advanced browsers, but sometimes degrades performance.

L8-dom Operating applications