Of Stack

JS implements the method of adding replacing and deleting node elements

  • 2021-07-01 06:16:46
  • OfStack

In this paper, the example tells the method of adding, replacing and deleting node elements in JS. Share it for your reference, as follows:

1 straight since, the node operation is more entangled, especially after inserting into a certain node. Actually, there is no such method, the method I wrote before has a problem, is the new node inserted into the old node, or should it be realized by insertBefore method

Here's how: 


<!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>page85 Delete replace 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 oldnode Is there a similar mark on the back 
  var nextnode = oldnode.nextSibling;
 if(nextnode){ // If none; otherwise null, Otherwise false, If there is, it is true
  oldnode.parentNode.insertBefore(newnode,nextnode);
 }else{
  oldnode.parentNode.appendChild(newnode);
 }
 }
</script>

More readers interested in JavaScript can check the topic of this site: Summary of JavaScript Operation DOM Skills "Summary of JavaScript Replacement Operation Skills", "Summary of JavaScript Value Transfer Operation Skills", "Summary of javascript Coding Operation Skills", "Summary of json Operation Skills in JavaScript", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Traversal Algorithm and Skills" and "Summary of JavaScript Mathematical Operation Usage"

I hope this article is helpful to everyone's JavaScript programming.

Related articles: