Sec understand JavaScript HTML DOM elements (nodes)

1, create a new HTML elements (nodes) - appendChild ()

To create a new HTML elements (nodes) need to create an element in it and then add elements already present.

<div ID = "DIV1"> 
<P ID = "P1"> This is a paragraph. </ P> 
<P ID = "P2"> This is another paragraph. </ P> 
</ div> 
 
<Script> var para = document.createElement ( "P" );
 var Node = document.createTextNode ( "This is a new paragraph." ); 
para.appendChild (Node); var Element document.getElementById = ( "DIV1" ); 
element.appendChild (para); </ Script>

 

Analysis examples

The following code is used to create a <p> element:

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

Create a new text node <p> elements:

var Node = Document . createTextNode ( "This is a new paragraph." );

The text node is added to the <p> element:

para.appendChild(node);

Finally, add the p elements in an existing element in.

Find existing elements:

var element = document.getElementById("div1");

Add to existing elements in:

element.appendChild(para);

2, create a new HTML elements (nodes) - insertBefore ()

The above examples we use the  appendChild () method, which is used to add a new element to the end.

If we need to add a new element to the beginning, you can use  insertBefore () method:

<div ID = "DIV1"> 
<P ID = "P1"> This is a paragraph. </ P> 
<P ID = "P2"> This is another paragraph. </ P> 
</ div> 
 
<Script> var para = document.createElement ( "P" );
 var Node = document.createTextNode ( "This is a new paragraph." ); 
para.appendChild (Node); var Element document.getElementById = ( "DIV1" );
 var Child = document.getElementById ( "P1" ); 
element.insertBefore (para, Child); </ Script>

 

3. Remove existing elements

To remove an element, you need to know the parent element of the element.

<div ID = "DIV1"> 
<P ID = "P1"> This is a paragraph. </ P> 
<P ID = "P2"> This is another paragraph. </ P> 
</ div> 
 
<Script> var parent = document.getElementById ( "DIV1" );
 var Child = document.getElementById ( "P1" ); 
parent.removeChild (Child); </ Script>

Analysis examples

HTML document <div> element includes two child nodes (two <p> element):

<div ID = "DIV1" > <P ID = "P1" > This is a paragraph. </ P> <P ID = "P2" > This is another paragraph. </ P> </ div>      

Find id = "div1" elements:

var parent = document.getElementById("div1");

Find id = "p1" of <p> elements:

var child = document.getElementById("p1");

Remove a child from the parent node elements:

parent.removeChild(child);

Note : If you can delete an element without reference to the parent element, would be great. But unfortunately. DOM need to be aware that you need to remove the element and its parent element.

The following code is a child known to be looking for, then look for its parent element, and then delete the child element (deleted node must know the parent node):

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

4, replace HTML elements - replaceChild ()

We can replace elements in the HTML DOM using replaceChild () method.

<div ID = "DIV1"> 
<P ID = "P1"> This is a paragraph. </ P> 
<P ID = "P2"> This is another paragraph. </ P> 
</ div> 
 
<Script> var para = document.createElement ( "P" );
 var Node = document.createTextNode ( "This is a new paragraph." ); 
para.appendChild (Node); var parent document.getElementById = ( "DIV1" );
 var Child = document.getElementById ( "P1" ); 
parent.replaceChild (para, Child); </ Script>