JavaScript DOM Combat: Creating and cloning elements

Dom to create and clone elements.

createelement () and createTextNode ()

CreateElement () and createTextNode () do things as their names say. The most common JavaScript dom methods are in practice-they have been used in the modified document tree. The goal at the time was to add the newly created element to the document tree, making it the last child node of an element.

1.//Create a new LI element

2. Var newchild=document.createelement (' Li ');

3.//Create a new element of a

4. Var newlink=document.createelement (' a ')

5.//Create a Text node

6. 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 yet. The most common JavaScript dom methods are the actual combat-modifying the document tree, using the appendchild () or insertbefore () to attach them to the document tree. For example:

1. Var Nav=document.getelementbyid ("Nav");

2.//Create a new LI element

3. Var newchild=document.createelement (' Li ');

4.//Create a new element of a

5. Var newlink=document.createelement (' a ')

6.//Create a Text node

7. Var newtext=document.createtextnode (' My Wiki ');

8.//Add text to the A element node

9. Newlink.appendchild (NewText);

10.//Set the attribute href and content for the A element node

Newlink.setattribute (' href ', ' # ');

12.//Add the A element node to the new LI element node

Newchild.appendchild (NewLink);

14.//Add the new LI element node to the UL element node

Nav.appendchild (NewChild);

This appends the text node to <a> and then appends the <a> with the text node to <li>, and finally appends <a> and text <li> to <ul>. At this point, my navigation bar ul has one more Li child node.

createTextNode () and HTML entities

createTextNode () has a problem: it cannot be created similar to &euro; (€ euro symbol) &yen; (¥ RMB symbol) © (&copy; Copyright symbols) & #8220; ("left double quotes") & #8221; ("right double quotes"), such as HTML entity elements. Instead of creating the symbols you need, it literally creates the text.

1. <script type= "Text/javascript" >

2. Window.onload=function () {

3. Var X=document.createtextnode ("&copy; Copyrights reserved ");

4. document.getElementById ("Test"). appendchild (x);

5.}

6. </script>

However, we can use innerHTML instead:

1. <script type= "Text/javascript" >

2. Window.onload=function () {

3. document.getElementById ("Test"). Innerhtml= "&copy;

4. Copyrights reserved ";

5.}

6. </script>

For the use of the innerHTML attribute, we will discuss it as a topic in the next section.

CloneNode ()

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

1. <div id= "Menu" >

2.

3. <ul id= "NAV" >

4. <li><a href= "#" >HOME</a></li>

5. <li><a href= "#" > (X) html/css</a></li>

6. <li><a href= "#" >Ajax/RIA</a></li>

7. <li><a href= "#" >GoF</a></li>

8. <li><a href= "#" >JavaScript</a></li>

9. <li><a href= "#" >JavaWeb</a></li>

Ten. <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 ()

1. <script type= "Text/javascript" >

2. Window.onload=function () {

3. var nav_list=[];

4. Var Nav=document.getelementbyid ("Nav");

5. Navnav_list=nav.getelementsbytagname ("Li");

6. var x=nav_list[0];

7. Var y=x.clonenode (true);

8. Nav.appendchild (y);

9.}

Ten. </script>

To properly use CloneNode (), you must understand its two characteristics:

1. CloneNode () accepts a parameter with an optional value of TRUE or false. True represents the clone element and all its child nodes. False indicates that the cloned element does not contain its child nodes. Usually, we use true in practice, and I have never encountered a situation where I want to clone a node without its child nodes.

2. CloneNode () does not clone an event handler. It's pretty annoying, and I don't know how this method is defined (I don't know why) so every time you clone a node, you have to redefine the event handler on the clone.

JavaScript DOM Combat: Creating and cloning elements