I may encounter it often, so I summarize it as follows:
1. Creation of dom elements
2. Insertion of dom elements
3. Replacement of dom elements
4. Deletion of dom elements
First of all, there are some simple dom elements on the page
aaaaaaaa
bbbbbbbb
cccccccccc
Next we create a div Element, js code:
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//innerText is not used here In order to avoid some problems caused by browser compatibility;
Then insert the created div with ID d in front of the div with ID B in the DOM element
var div_wrap = document.getElementById('wrap');
var div_b = document.getElementById('b');
div_wrap.insertBefore(div_d,div_b);
If you insert it directly behind the child element with the id of wrap, you can do this:
div_wrap.insertBefore( div_d,null);
If div_b is replaced, the following is as follows:
div_wrap.replaceChild(div_d,div_b);
Finally we delete the specified div
div_b with an element id of b .parentNode.removeChild(div_b);
or
document.body.removeChild(div_b);
There may be many derived methods and applications in the future. I will not continue to write them down for the time being