Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how JavaScript uses DOM to create and clone elements. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

CreateElement () and createTextNode ()

CreateElement () and createTextNode () do exactly what their names say. The most common JavaScript DOM methods are practical-they have been used in the modification document tree. The goal at that time was to add the newly created element to the document tree and make it a child node of an element.

/ / create a new li element var newChild=document.createElement ('li'); / / create an a new element var newLink=document.createElement (' a') / / create a Text node var newText=document.createTextNode ('My Wiki')

NewChild points to the newly created element object, newLink points to the newly created element object, and newText points to the newly created text node object. None of these nodes have been inserted into the document yet. The most common JavaScript DOM method is to modify the document tree, using appendChild () or insertBefore () to attach them to the document tree. For example:

Var nav=document.getElementById ("nav"); / / create a new li element var newChild=document.createElement ('li'); / / create an a new element var newLink=document.createElement (' a') / / create a Text node var newText=document.createTextNode ('My Wiki'); / / add Text to the an element node newLink.appendChild (newText); / / set attribute href and content newLink.setAttribute ('href', "#") to the an element node / / add an element node to the new li element node newChild.appendChild (newLink); / / add the new li element node to the ul element node nav.appendChild (newChild)

This appends the text node to the, then the one that contains the text node to, and * * appends the inclusion and text to the. At this point, I have a Li child node in my navigation bar ul.

CreateTextNode () and HTML entities

CreateTextNode () has a problem: it cannot create HTML entity elements like "(euro symbol) ¥(RMB symbol) ©(©copyright symbol)" ("left double quotation marks)" ("right double quotes)" and so on. Instead of creating the symbols you need, it creates text literally.

_ window.onload=function () {var x=document.createTextNode ("©Copyrights reserved"); document.getElementById ("test") .appendChild (x);}

However, we can use innerHTML instead of:

_ window.onload=function () {document.getElementById ("test") [xss_clean] = "©Copyrights reserved";}

The use of the innerHTML attribute will be discussed in detail as a topic in the next section.

CloneNode ()

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

My navigation bar HOME (X) Html / Css Ajax / RIA GoF JavaScript JavaWeb jQuery MooTools Python Resources

Test cloneNode ()

_ 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);}

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

1. CloneNode () accepts a parameter with an optional value of true or false. True represents a clone element and all its child nodes. False represents a clone element but does not contain its child nodes. Usually, we use true in practice, and I've never come across a situation where I want to clone a node without including its child nodes.

2. CloneNode () does not clone event handlers. It's pretty exasperating, 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.

These are all the contents of the article "how to create and clone elements with JavaScript using DOM". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.