How to replace the DOM node?

In the case of how to use a replacement of an existing node, use the following:

<!--  html -->
<body>
  <div id='parent'>
    <p id='one'>one</p>
    <p id='two'>two</p>
  </div>
</body>

//js
var oldNode = document.getElementById('one')
var newNode = document.createElement("h1")
var parentNode = document.getElementById('parent')
newNode.textContent = 'hello world'
parentNode.replaceChild(newNode, oldNode)

Remember add an element has two nodes (at the end position of the insertion and before the specified parent element inserted)

parentElement.insertBefore(node, nextSibling)
parentElement.appendChild('node')

Above all we need to get the parent element to operate

<!--  html -->
<body>
  <div id='parent'>
    <p id='one'>one</p>
    <p id='two'>two</p>
  </div>
</body>

// js

var oldNode = document.getElementById('one');

var newNode = document.createElement("p");

// node的前后插入节点
oldNode.after(newNode)
oldNode.before(newNode)

// 在node的里面进行插入
oldNode.append(newNode) // 在node的里面最后一个
oldNode.prepend(newNode) // 在node的里面最前面

// 将node替换为节点或者字符串
// oldNode.replaceWith(newNode) // node.replaceWith(...nodes or strings)

For node.appendChild(newNode), it newNodemust be a node type, and append('<p>hello world</p>')will output it as a string

The following methods are not created nodewhen the type of direct string as html performance, similar to innerHTMLthe role

elem.insertAdjacentHTML(where, html)

The method first parameter is the code string, designated with respect to the insertion position of elem, must be one of the following four values:

"Beforebegin" - insert html elem before the beginning of the position,
"Afterbegin" - Insert html (translation: elem before the first child of the inner element) in position after the beginning elem,
"Beforeend" - elem before the end position of the insertion html (translation: elem after the last child element inside),
"Afterend" - insert html after elem end position.

The second parameter is HTML string, inserted into the page as HTML

parentNode.insertAdjacentHTML('beforebegin','<p>hello world</p>')
parentNode.insertAdjacentHTML('afterend', '<p>hello nanjing</p>')

The idea is to replace the removed out kind being added to the specified position ( insertBefore)

Node removal method in the old way is to get the parent element, removing a node in the parent element, can now be removed directly to a node

parentNode.removeChild(node)
node.remove()

It should be noted here is not to move the operation to remove the use of the method, because the insert operation will first remove the old node into a new place, you just need to get to the node you want to move, and you can use the Insert method, the above appendChildand the method shown below afterand other methods can be inserted

var oldNode = document.getElementById('one');

var parentNode = document.getElementById('parent');

parentNode.appendChild(oldNode);

var oldNode = document.getElementById('one');

var parentNode = document.getElementById('parent');

// three.before(oldNode);

two.after(oldNode);

How to replace the DOM node?

How to replace the DOM node?

Guess you like