DOM (3) JS Create, add element

1.createElement (), createTextNode (), AppendChild ()

<Script>                              　　 varBody=document.getElementsByTagName ('Body')[0]; //Get BODY element                                varDiv=Document.createelement ("Div"); //create element node Direct write element nameBody.appendchild (div);//appendchild () is the addition of child elements, (multiple) By default to the end of child elements                                varStr=document.createTextNode ('Hello');//Create a text nodediv.appendchild (str); </Script>

2.insertBefore (x, y), adding a new x child element before the specified child element y (while appendchild () is the handle element plus the last)

<　　　　ulID= "box">            <Li>Apple</Li>            <LiID= "Li">Pears</Li>        </ul>        <Script>                            varBox=document.getElementById ('Box'); varXG=Document.createelement ('Li'); varStr=document.createTextNode ('Watermelon') Xg.appendchild (str); varLizi=document.getElementById ('Li');        Lizi.parentNode.insertBefore (Xg,lizi); </Script>

3.replaceChild (x, y); Replace the child node Y with the child node X, y including all of its child nodes,

        <ulID= "box">            <Li>Apple</Li>            <LiID= "Li">Pears</Li>        </ul>        <Script>                            varBox=document.getElementById ('Box'); varP=Document.createelement ('P');  Box.parentNode.replaceChild (P,box); Entire UL (including LI) HTML structure, replaced by <p></p></Script>                

The 4.cloneNode () method can be copied from the node.

<　　　　 ulID= "box">            <Li>Apple</Li>            <LiID= "Li">Pears</Li>        </ul>        <Script>                varBody=document.getElementsByTagName ('Body')[0]; varBox=document.getElementById ('Box'); varLi=document.getElementById ('Li'); varClone=Li.clonenode (true);  Box.appendchild (clone); //"pear" copy of one add to UL varClone2=Box.clonenode (true); Body.appendchild (Clone2); //Whole UL copy, add to Body </Script>

5. RemoveChild () Removes the specified child nodes

     　　  <ulID= "box">            <Li>Apple</Li>            <LiID= "Li">Pears</Li>        </ul>        <Script>                varBox=document.getElementById ('Box'); Box.removechild (LI); //Remove the pear that one Li </Script>            

DOM (3) JS Create, add element