Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to create nodes in javascript", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to create nodes in javascript" this article.

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

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

The method of creating Node in javascript

1. CreateElement () method: create element node

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

Var element = document.getElement ("tagName")

Where element represents a reference to the new element, and createElement () is a method of the document object, which takes only one parameter to specify the name of the tag that creates the element.

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

Var p = document.createElement ("p"); / / create a paragraph element var info = "nodeName:" + p.nodeName; / / get the element name info + = ", nodeType:" + p.nodeType; / / get the element type, if 1 indicates the element node console.log (info)

New elements created using the createElement () method are not 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 to implement it.

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

Var p = document.createElement ("p"); / / create paragraph element document.body.appendChild (p); / / add paragraph element to body element

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)

The parameter data represents a string.

Example

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

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

Due to reasons such as the DOM operation, there may be situations where the text node does not contain text, or two text nodes appear one after another. To avoid this, the normalize () method is typically called on the parent element, deleting empty text nodes and merging adjacent text nodes.

3. CreateAttribute () method: create an attribute node

You can create an attribute node using the createAttribute () method of the document object, 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 named align with a value of center, then sets the attribute align for the tag, and finally uses three methods to read the value of the attribute align.

Document.createAttribute (name) 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"

The attribute node is typically located in the header tag of the element. The attribute list of the element is preloaded with the element information and is stored in the associative array. For example, for the following HTML structure.

When the DOM is loaded, the variable divElement that represents the HTML div element automatically generates an association collection that retrieves these attributes in the form of name-value pairs.

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

In traditional DOM, common point syntax accesses HTML attributes directly through elements, such as img.src, a.href, and so on. Although this approach 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 src attribute of HTML. The following two uses work well in different browsers.

Var img = document.getElementById ("img1"); img.setAttribute ("src", "http://www.w3.org"); / / HTML attribute img.src =" http://www.w3.org"; / / JavaScript attribute

Similarly, there are onclick, style and href. To ensure that JavaScript scripts work well in different browsers, standard usage is recommended, and many HTML properties are not mapped by JavaScript, so they cannot be read or written directly through script properties.

The above is all the content of the article "how to create nodes in javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.