JavaScript DOM practice: Creating and cloning Elements

DOM allows you to create your own elements and text nodes and add them to the large document tree. Theoretically, you can remove all elements from the tree, create new elements, or restructure the document tree to completely change the page. However, in practice, this feature has some limitations. DOM also allows you to clone existing elements, so you can easily copy a part of the document and distribute copies in the document.

BKJIA recommended reading: The nature and operation methods of JavaScript DOM

CreateElement () and createTextNode ()

CreateElement () and createTextNode () do what they call. The most common JavaScript DOM method practices-they have been used to modify the document tree. The purpose was to add the newly created element to the document tree and make it the last subnode of an element.

 
 

  
  
// Create a new li Element
  
  
Var newChild = document. createElement ('lil ');
  
  
// Create a new a Element
  
  
Var newLink = document. createElement ('A ')
  
  
// Create a Text node
  
  
Var newText = document. createTextNode ('My Wiki ');
 
 

NewChild points to the newly created <li> element object, newLink points to the newly created <a> element object, and newText points to the newly created text Node object. These nodes have not been inserted into the document. The most common JavaScript DOM method practice-appendChild () or insertBefore () used in modifying the document tree to attach them to the document tree. For example:

 
 

  
  
Var nav = document. getElementById ("nav ");
  
  
// Create a new li Element
  
  
Var newChild = document. createElement ('lil ');
  
  
// Create a new a Element
  
  
Var newLink = document. createElement ('A ')
  
  
// Create a Text node
  
  
Var newText = document. createTextNode ('My Wiki ');
  
  
// Add Text to element
  
  
NewLink. appendChild (newText );
  
  
// Set the href and content for element
  
  
NewLink. setAttribute ('href ',"#");
  
  
// Add Element a to the new li Element Node
  
  
NewChild. appendChild (newLink );
  
  
// Add the new li element node to the ul Element Node
  
  
Nav. appendChild (newChild );
 
 

Add the text node to <a>, and then <a> attach the node that contains the text node to <li>, finally, add <a> and <li> of the text to <ul>. At this time, I have a li subnode in the navigation bar ul.

CreateTextNode () and HTML Object

CreateTextNode () has a problem: it cannot create a symbol similar to & euro; €) & yen; ¥ RMB)©& Copy; copyright symbol) & #8220; "double quotation marks on the left) & #8221;" double quotation marks on the right), such as HTML Entity elements. It creates text literally instead of the symbols you need.

 
 

  
  
<script  type="text/javascript"> 
  
  
window.onload=function(){  
  
  
 var x=document.createTextNode("&copy; Copyrights reserved");  
  
  
 document.getElementById("test").appendChild(x);  
  
  
}  
  
  
</script>  
 
 

However, we can use innerHTML instead:

 
 

  
  
<script  type="text/javascript"> 
  
  
window.onload=function(){   
  
  
document.getElementById("test").innerHTML="&copy; 
  
  
Copyrights reserved";  
  
  
}  
  
  
</script>  
 
 

We will discuss the usage of innerHTML attributes as a topic in the next section.

CloneNode ()

The cloneNode () method clones a node, that is, it can make a perfect copy of the node, so that you can insert it into the document tree later. Navigation bar HTML code:

 
 

  
  
<Div id = "menu">
  
  
<H1> my navigation bar  
  
<Ul id = "nav">
  
  
<Li> <a href = "#"> HOME </a> </li>
  
  
<Li> <a href = "#"> (X) Html/Css </a> </li>
  
  
<Li> <a href = "#"> Ajax/RIA </a> </li>
  
  
<Li> <a href = "#"> GoF </a> </li>
  
  
<Li> <a href = "#"> JavaScript </a> </li>
  
  
<Li> <a href = "#"> JavaWeb </a> </li>
  
  
<Li> <a href = "#"> jQuery </a> </li>
  
  
<Li> <a href = "#"> MooTools </a> </li>
  
  
<Li> <a href = "#"> Python </a> </li>
  
  
<Li> <a href = "#"> Resources </a> </li>
  
  
</Ul>
  
  
</Div>
 
 

Test cloneNode ()

 
 

  
  
<script  type="text/javascript"> 
  
  
window.onload=function(){  
  
  
     var nav_list=[];  
  
  
  var nav=document.getElementById("nav");  
  
  
     navnav_list=nav.getElementsByTagName("li");  
  
  
  var x=nav_list[0];  
  
  
  var y=x.cloneNode(true);  
  
  
  nav.appendChild(y);  
  
  
}  
  
  
</script> 
 
 

To use cloneNode () correctly, you must understand its two features:

1. cloneNode () accepts a parameter with an optional value of true or false. True indicates the clone element and all its subnodes. False indicates the child node that clones an element but does not contain it. In general, we use true in practice. I have never encountered the situation of cloning a node but not including it.

2. cloneNode () does not clone the event handler. This is quite annoying. I don't know why this method is defined.) So every time you clone a node, You have to redefine the event handler on the clone.

Address: http://cssrainbow.cn/tutorials/javascript/589.html