In JavaScript, you can create various types of nodes.
The common ways to create nodes are listed below:
Method description
CreateElement () Create an element node
createTextNode () Create a text node
Createcomment () Create a text node
Createdocumentfragment () Create a document fragment node
All four of these methods are methods of the Document object.
CreateElement () createelement () is used to create an element node, the nodetype=1 node.
Grammar:
Document.createelement (TagName)
Where TagName is the name of the HTML tag, and a node object is returned.
For example, the statements to create <div> labels and <p> tags are as follows:
| The code is as follows | Copy Code |
| var ele_div=document.createelement ("div"); var ele_p=document.createelement ("P"); createTextNode () createTextNode () |
|
Used to create a comment node, that is, a nodetype=8 node.
Grammar:
Document.createcomment (comment)
Where comment is the content of the annotation, and a node object is returned.
For example, create a comment node that reads "This is a comment node":
| The code is as follows | Copy Code |
| var ele_comment=document.createcomment ("This is a comment node"); Createdocumentfragment () createdocumentfragment () |
|
Used to create a document fragment node.
A document fragment node is a collection of several DOM nodes that can include various types of nodes, such as element nodes, text nodes, annotation nodes, and so on. The document fragment node is empty at the beginning of creation and needs to be added to the node.
Grammar:
Document.createdocumentfragment ();
For example, create a document fragment node and assign it to a variable:
| The code is as follows | Copy Code |
var ele_fragment=document.createdocumentfragment (); |
|
You can use document.createTextNode () to create a new text node that takes one argument-the text to insert into the node. As with the value of setting an existing text node, the text that is the parameter is encoded in HTML or XML format:
| The code is as follows | Copy Code |
var textnode = document.createTextNode ("<strong>Hello</strong> world!"); |
|
When you create a new text node, you also set the Ownerdocument property for it. However, unless you add a new node to the document tree, we do not see the new node in the browser window. The following code creates a <div> element and adds a message to it:
| The code is as follows | Copy Code |
var element = document.createelement ("div"); |
|
This example creates a new <div> element and assigns it a class attribute with a value of "message". Then, you create a text node and add it to the element that you created earlier. The final step is to add this element to the <body> element in the document so that you can see the newly created element and the text node in the browser.
Typically, each element has only one text child node. However, in some cases it may also contain a number of script nodes, as shown in the following example:
| The code is as follows | Copy Code |
| var element = document.createelement ("div"); Element.classname = "message"; var textnode = document.createTextNode ("Hello world!"); Element.appendchild (Textnode); var anothertextnode = document.createTextNode ("yippee!"); Element.appendchild (Anothertextnode); Document.body.appendChild (Element); |
|
If two text nodes are adjacent sibling nodes, the text in these two nodes will be connected to show that there are no spaces in the middle.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
