In js, if you want to create an element node, we usually use createElement, but to create a text node, we can use createTextNode () or createComment () for an instance. I will introduce it in detail below.
In Javascript, you can create various types of nodes.
The following describes how to create a node:
Method description
CreateElement () creates an element node
CreateTextNode () creates a text node
CreateComment () creates a text node
CreateDocumentFragment () create a document fragment Node
The above four methods are the document Object methods.
CreateElement () is used to create an element node, that is, a node with nodeType = 1.
Syntax:
Document. createElement (tagName)
The tagName is the name of the HTML tag, and a Node object is returned.
For example, the statement for creating the <div> label and <p> label is as follows:
| The Code is as follows: | Copy code |
| Var ele_div = document. createElement ("div "); Var ele_p = document. createElement ("p"); createTextNode () |
|
Creates a comment node, that is, a node with nodeType = 8.
Syntax:
Document. createComment (comment)
Comment is the comment content, and a Node object is returned.
For example, create a comment node with the content "this is a comment node ":
| The Code is as follows: | Copy code |
| Var ele_comment = document. createComment ("this is a comment node "); CreateDocumentFragment () |
|
Used to create a document fragment node.
A document fragment node is a collection of several DOM nodes, including various types of nodes, such as element nodes, text nodes, and comment nodes. The File Fragment node is empty at the beginning of creation and needs to be added to it.
Syntax:
Document. createDocumentFragment ();
For example, create a File Fragment node and assign it to the variable:
| The Code is as follows: | Copy code |
| Var ele_fragment = document. createDocumentFragment (); |
|
You can use document. createTextNode () to create a new text node. This method accepts a parameter-the text to be inserted into the node. Like setting the value of an existing text node, the text as a parameter will also be 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, the ownerDocument attribute is also set for it. However, unless we add the new node to the document tree, we will 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 "); |
|
In this example, a new <div> element is created and the class feature with the value "message" is specified for it. Then, a text node is created and added to the preceding element. The last step is to add this element to the <body> element in the document, so that you can see the newly created element and text node in the browser.
Generally, each element has only one text subnode. However, in some cases, how many file subnodes may be included, 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 the two text nodes are adjacent compatriot nodes, the text in the two nodes will be connected and displayed without 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
