JS How to add, remove, move, copy, create, and find nodes

(1) Create a new node

var para=document.createelement ("P"); Create a new <p> element var Node=document.createtextnode ("This is the new paragraph. "); Created a text node para.appendchild (node); Append this text node var element=document.getelementbyid ("Div1") to the <p> element;//Append the new element to an existing element Element.appendchild (para); Append a new element to the existing element

(2) Add, remove, replace, insert before, insert, copy

AppendChild ()

RemoveChild ()

ReplaceChild ()//replacechild (New_child,old_child)

InsertBefore ()

InsertAfter ()

CloneNode ()//does not operate under the parent element Obj.clonenode ()//obj refers to the element to be cloned CloneNode () Incoming Boolean value true represents the clone obj.innerhtml value

(3) Find

document.getElementsByTagName ("")//via tag name

Document.getelementsbyname ("")//value of the Name property of the element

document.getElementById ("")//through element ID, uniqueness

Document.getelementsbyclassname (""); Find by Class

Document.queryselector ("")

<div class= "box" ></div>
<div id= "Box-one" >
<p id= "P1" >p1p1p1p1</p>
</div>

<script type= "Text/javascript" >
Create a Node
var parent=document.createelement ("div");
var Text=document.createtextnode ("This is the first text created using Createtexxtnote");
Parent.appendchild (text);
Console.log (parent)




To add a node to an element
var grandpa=document.queryselector (". box");
Console.log (Grandpa)
Grandpa.appendchild (parent);






To add a node after an element
var p=document.createelement (' P ');
var html=document.createtextnode ("code added behind the element");
P.appendchild (HTML)
InsertAfter (P,GRANDPA);
function InsertAfter (newelement, targetelement) {
Newelement is the element to append targetelement is the position of the specified element
var grandpa = Targetelement.parentnode; Finds the parent node of the specified element
if (Grandpa.lastchild = = targetelement) {//Determines whether the specified element is the last position in the node if so, use the AppendChild method directly
Grandpa.appendchild (newelement, targetelement);
}else{
Grandpa.insertbefore (newelement, targetelement.nextsibling);
};
};






Add a node before the element insertbefore
var h6=document.createelement ("H6");
var htext=document.createtextnode ("Add h6 before element");
H6.appendchild (Htext);
Console.log (Htext);
Console.log (Grandpa)
Parent.parentNode.insertBefore (h6,parent);//Use sibling methods to insert before sibling elements







The front of the element inside the Insert node InsertBefore
function Inhoutele () {
var otest = document.getElementById ("Box-one");
var newNode = document.createelement ("div");
var reforenode = document.getElementById ("P1");
newnode.innerhtml = "Insert node in front of the element";
Otest.insertbefore (Newnode,reforenode); The newly created element node is inserted in front of the element with ID p1
} inhoutele ()


Inserts a node behind the inside of the element appendchild
function Inqianele () {
var otest = document.getElementById ("Box-one");
var newNode = document.createelement ("div");
var reforenode = document.getElementById ("P1");
newnode.innerhtml = "Insert node in front of the element";
Otest.appendchild (Newnode,reforenode); The newly created element node is inserted in front of the element with ID p1
} inqianele ()
</script>

JS How to add, remove, move, copy, create, and find nodes