What are the ways to create nodes in javascript

Methods to create nodes in JavaScript: 1. The createElement() method can create element nodes; 2. The createTextNode() method can create text nodes; 3. The createAttribute() method can create attribute nodes.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Methods to create nodes in javascript

1. createElement() method: Create element nodes

Use the createElement() method of the document object to create a new element node based on the label name specified by the parameter and return a reference to the newly created element. The usage is as follows:

var element = document.getElement("tagName");

Among them, element represents a reference to a new element, and createElement() is a method of the document object. This method has only one parameter, which is used to specify the tag name of the created element.

[Example 1] The following code creates a paragraph mark p in the current document and stores it in the variable p. Since this variable represents an element node, its nodeType attribute value is equal to 1 and its nodeName attribute value is equal to p.

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

New elements created using the createElement() method will not be automatically added to the document. If you want to add this element to the document, you also need to use the appendChild(), insertBefore() or replaceChild() method.

[Example 2] The following code demonstrates how to add the newly created p element to the body element. When an element is added to the document tree, it is displayed immediately.

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

2. createTextNode() method: Create a text node

Use the createTextNode() method of the document object to create a text node. The usage is as follows:

document.createTextNode(data)

• Parameter data represents a string.

Example

The following example creates a new div element, sets its class value to red, and then adds it to the document.

var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

Due to DOM operations and other reasons, a text node may not contain text, or two text nodes may appear consecutively. In order to avoid this situation, the normalize() method is generally called on the parent element to delete empty text nodes and merge adjacent text nodes.

3. createAttribute() method: create attribute nodes

Use the createAttribute() method of the document object to create attribute nodes. The specific usage is as follows:

document.createAttribute(name)

The parameter name represents the name of the newly created attribute.

Example 1

The following example creates an attribute node with the name align and value center, then sets the attribute align for the label b390322fe69e754cc2d7247050226b6d, and finally uses 3 respectively This method reads the value of the attribute align.

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

Attribute nodes are generally located in the head tag of the element. The attribute list of the element is pre-loaded with the element information and stored in an associative array. For example, take the following HTML structure.

<div id="div1" title="div"></div>

When the DOM is loaded, the variable divElement representing the HTML div element will automatically generate an associated collection that retrieves these attributes as name-value pairs.

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

In the traditional DOM, dot syntax is commonly used to directly access HTML attributes through elements, such as img.src, a.href, etc. Although this method is not standard, it is supported by all browsers.

Example 2

The img element has a src attribute, and all image objects have a src script attribute, which is associated with the HTML src attribute. Both usages below work well in different browsers.

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>

Similar ones include onclick, style and href. In order to ensure that JavaScript scripts can work well in different browsers, it is recommended to adopt standard usage, and many HTML attributes are not mapped by JavaScript, so they cannot be read and written directly through script attributes.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What are the ways to create nodes in javascript. For more information, please follow other related articles on the PHP Chinese website!