This article describes how JS implements adding, replacing, and deleting node elements. Share it for your reference, as follows:
I have always been confused about node operations, especially after inserting it into a certain node. There is no such method. I have a problem with the method I wrote before. Should I insert the new node into the old node? Or should I use the insertBefore method to implement it.
Here is the method:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <!-- Created by TopStyle Pro Trial Version - www.bradsoft.com --> <title>page85Delete Replacement Insert</title> </head><body onload="insertMessageafter()"> <p id="p1">Hello World</p></body></html><script> function removeMessage(){ var op = document.getElementByIdx_x("p1"); //document.body.removeChild(op); //op.parentNode returns the parent class node op.parentNode.removeChild(op); } function replaceMessage(){ var newop = document.createElement_x("p"); newop.appendChild(document.createTextNode("Hello Java")); //alert(newop.innerHTML); var oldop = document.getElementByIdx_x("p1"); //document.body.removeChild(op); //op.parentNode returns the parent class node oldop.parentNode.replaceChild(newop,oldop); //document.body.replaceChild(newop,oldop) } function insertMessagebefore(){ var newop = document.createElement_x("p"); newop.appendChild(document.createTextNode("Hello Java")); var oldop = document.getElementByIdx_x("p1"); oldop.parentNode.insertBefore(newop,oldop); } function insertMessageafter(){ var newop = document.createElement_x("p"); newop.appendChild(document.createTextNode("Hello Java")); var oldop = document.getElementByIdx_x("p1"); insertafter(newop,oldop); } function insertbefore(newnode,oldnode){ oldnode.parentNode.insertBefore(newnode,oldnode); } function insertafter(newnode,oldnode){ //Judge whether there are tags of the same category after the oldnode var nextnode = oldnode.nextSibling; if(nextnode){ //If not, it is null, it is false, if there is, it is true oldnode.parentNode.insertBefore(newnode,nextnode); }else{ oldnode.parentNode.appendChild(newnode); } }</script>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Operation DOM Skills", "Summary of JavaScript Replacement Operation Techniques", "Summary of JavaScript Value Transfer Operation Techniques", "Summary of JavaScript Encoding Operation Techniques", "Summary of JSON Operation Techniques in JavaScript", "JavaS Summary of script switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.