Detailed explanation of how to create, use and delete dom node instances in JavaScript-JS Tutorial-php.cn

Detailed explanation of how to create, use and delete dom node instances in JavaScript

伊谢尔伦

Release： 2017-07-20 13:26:38

Original

1382 people have browsed it

Create node

In order to create a new node, you can use createElement and createTextNode. If the new creation is completed, you can use appendChild() to add the node to the DOM tree.

Create an element P and set the innerHTML attribute

var myp = document.createElement(&#39;p&#39;); 
myp.innerHTML = &#39;yet another&#39;;

Copy after login

After the element P is created, you can modify and add attributes at will

myp.style.border = &#39;2px dotted blue&#39;

Copy after login

Next, you can use appendChild to add new nodes to the DOM tree.

document.body.appendChild(myp)

Copy after login

Methods of using DOM
It is indeed very simple to use the innerHTML method. We can use the pure dom method to achieve the above functions.

Create a new text node (yet another)
Create a new paragraph
Place the text node Add to paragraph.
Add paragraphs to body

// 创建p 
var myp = document.createElement(&#39;p&#39;); 
// 创建一个文本节点 
var myt = document.createTextNode(&#39;one more paragraph&#39;) 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement(&#39;strong&#39;); 
str.appendChild(document.createTextNode(&#39;bold&#39;)); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()

Copy after login

Another way to create a new node is, we You can use cloneNode to copy a node. cloneNode() can pass in a boolean parameter. If true, it means a deep copy, including its child nodes, if false, it only copies itself.

First get the element to be copied.

var el = document.getElementsByTagName(&#39;p&#39;)[1];//<p><em>second</em> paragraph</p>

Copy after login

No need to make a deep copy first.

document.body.appendChild(el.cloneNode(false))

Copy after login

We found that the page did not change, because only the element p was copied. The same effect as below.

document.body.appendChild(document.createElement(&#39;p&#39;));

Copy after login

If deep copy is used, all child nodes including p below will be copied. Including text nodes and EM elements of course.

document.body.appendChild(el.cloneNode(true))

Copy after login

insertBefore()
Using appendChild is to add the element to the end. The insertBefore method can more precisely control the position of inserted elements.

elementNode.insertBefore(new_node,existing_node)

Copy after login

Example

document.body.insertBefore( 
 document.createTextNode(&#39;boo!&#39;), 
 document.body.firstChild 
);

Copy after login

It means to create a new text node and use it as the first node of the body element .
Delete Node

To delete a node from the DOM tree, we can use removeChild(). Let’s take a look at the HTML to be operated

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>

Copy after login

Let’s take a look at the following code. Delete the second paragraph

var myp = document.getElementsByTagName(&#39;p&#39;)[1]; 
var removed = document.body.removeChild(myp);

Copy after login

The removed node is the deleted node. The deleted node can still be used in the future.

We can also use the replaceChild() method. This method is to delete a node and replace it with another node. After performing the last node deletion operation, the result is as follows

<body> 
 <p class="opener">first paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>

Copy after login

Let’s take a look at the use of replaceChild. We replace the second p

var replaced = document.body.replaceChild(removed, p);

Copy after login

with the last deleted node, which is the same as removeChild returns. Replaced is the removed node. Now the result is

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <!-- and that&#39;s about it --> 
</body>

Copy after login

The above is the detailed content of Detailed explanation of how to create, use and delete dom node instances in JavaScript. For more information, please follow other related articles on the PHP Chinese website!