No1, create a new element node, and add it to the body
1 window.onload = t; 2 function T () {3 var nodeli = document.createelement (' li '); 4 Document.body.appendChild (nodeli); 5 Nodeli.style.cssText = ' width:300px;background:red; ' ; 6 }The above shows the effect as:
NO2, creates an element node, creates a text node, appends the text node to the element node, and appends the element node to the body.
Window.onload = t; function T () { var nodeli = document.createelement (' li '); Create an Li node var li_text = document.createTextNode (' text node '); Create a text node nodeli.appendchild (li_text); Append a text node to the LI node // append element node to body // set element node style }NO3, insert node InsertBefore at the specified location (parameter 1, parameter 2):
The first parameter is the heart node to be inserted, and the second parameter is the existing node, which is the front of the node in which to insert.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>Untitled Document</title>6 <Script>7 functionT () {8 varNodeli=Document.createelement ('Li'); //Create an Li node9 varLi_text=document.createTextNode ('text Node'); //Create a text nodeTen Nodeli.appendchild (Li_text); //append a text node to an LI node One A varNodeul=document.getElementsByTagName ('ul')[0]; //get the first UL node - varNodeli1=Nodeul.getelementsbytagname ('Li')[2]; //This representation is always inserted before the third one. No matter how many times you add it, each time you start inserting it from the new third one. The first time is inserted before the fall, followed by the newest third node before inserting - Nodeul.insertbefore (NODELI,NODELI1);//the function insertbefore () indicates which node was added before. The first parameter is the new node to be inserted, and the second parameter is an existing node. the } - </Script> - </Head> - + <Body> - <ul> + <Li>Spring</Li> A <Li>Summer</Li> at <Li>Autumn</Li> - <Li>Winter</Li> - </ul> - <HR/> - <Buttononclick= "T ()">Add a node at a specified location</Button> - </Body> in </HTML>
The display effect is:
Create element nodes, text nodes, and add nodes at specified locations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
