Create a text node using js document. createTextNode ()

Source: Internet
Author: User

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 ");
Element. className = "message ";
Var textNode = document. createTextNode ("Hello world! ");
Element. appendChild (textNode );
Document. body. appendChild (element );

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.