Home > Article > Web Front-end > Detailed explanation of how to create, use and delete dom node instances in JavaScript
Detailed explanation of how to create, use and delete dom node instances in JavaScript
- 伊谢尔伦Original
- 2017-07-20 13:26:381293browse
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('p'); myp.innerHTML = 'yet another';
After the element P is created, you can modify and add attributes at will
myp.style.border = '2px dotted blue'
Next, you can use appendChild to add new nodes to the DOM tree.
document.body.appendChild(myp)
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('p'); // 创建一个文本节点 var myt = document.createTextNode('one more paragraph') myp.appendChild(myt); // 创建一个STRONG元素 var str = document.createElement('strong'); str.appendChild(document.createTextNode('bold')); // 把STRONG元素添加到P中 myp.appendChild(str); // 把P元素添加到BODY中 document.body.appendChild(myp); //结果<p>one more paragraph<strong>bold</strong></p> cloneNode()
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('p')[1];//<p><em>second</em> paragraph</p>
No need to make a deep copy first.
document.body.appendChild(el.cloneNode(false))
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('p'));
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))
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)
Example
document.body.insertBefore( document.createTextNode('boo!'), document.body.firstChild );
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's about it --> </body>
Let’s take a look at the following code. Delete the second paragraph
var myp = document.getElementsByTagName('p')[1]; var removed = document.body.removeChild(myp);
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's about it --> </body>
Let’s take a look at the use of replaceChild. We replace the second p
var replaced = document.body.replaceChild(removed, p);
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's about it --> </body>
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!