Home > Developer > JavaScript
Ways to create an element:
Detailed code:
<body> <input type= "button" value= "Create and Add Node 1" onclick= "addNode1 ()"/> <input type= "button" Value= "Create and Add Node 2" onclick= "AddNode2 ()"/> <input type= button "value=" Create and Add Node 3 "onclick=" AddNode3 () "/>" <input type= "button" value= "Remove node 1" onclick= ' removenode () '/> <input ' button ' type= ' ReplaceNode Node 2 replaces "onclick= ' Remove2 ()"/><!--1 replaces 2, and 1 does not keep--> <input type= "button" value= "Clone Replacement" Onclick= ' Clone () '/> <div id= "DIV_ID1" > This is the div module--</div> <div id= "Div_id2" > Must study Well, So that you can have a good return </div> <div id= "DIV_ID3" > Good work, refueling ↖(^ω^)↗ </div> <div id= "Div_id4" > You know area, experiment area </div>
How to: Create a text document
<span style= "FONT-SIZE:18PX;" >function AddNode1 () {
//1 uses createTextNode () to create a text object
var text=document.createtextnode ("This is modified, created document");
2 Get Div object
var node1=document.getelementbyid ("Div_id1");
Add a Div object to the child
Node1.appendchild (text);} </span><span style= "FONT-SIZE:24PX;" >
</span>
Mode two: Use CreateElement () to create a Label object
function AddNode2 () {
//1, using createelement () to create a tag object
var nn=document.createelement ("input");
Nn.type= "button"
nn.value= "buttons created";
Nn.target= "_blank";
2, get the Div object
var node2=document.getelementbyid ("Div_id2");
Add a Div object to the child
Node2.appendchild (NN);
}
Mode three: Direct use of a property in the container tag: innerHTML-----Essentially change the "HTML code" in the label container, not what we think of as the object tree operation
function AddNode3 () {
var Mm=document.getelementbyid ("Div_id3");
Mm.innerhtml= "<a href= ' http://www.baidu.com ' ><input type= ' button ' value= ' New button ' ></a> ';
}
Using Removenode and RemoveChild to remove the child nodes from the element two methods, usually using the second method
function Removenode () {
var node =document.getelementbyid ("Div_id4"); alert (node.nodename);//div
// suicide Node.removenode (true);//removenode deletes an object from the document hierarchy. ie can appear phenomenon, generally do not use suicide
node.parentNode.removeChild (node),////through the parent node to remove its children, generally used
alert ("AA");
}
function Remove2 () {
var node1 =document.getelementbyid ("Div_id1");
var node2 =document.getelementbyid ("Div_id2"); Node1.replacenode (node2)//suicide-not generic
////replaces its child with a parent node: replace Node2 node1.parentNode.replaceChild with Node1
(Node1,node2);//object.replacechild (Onewnode, Ochildnode)
}
function Clone () {
var node1 =document.getelementbyid ("Div_id1");
var node2 =document.getelementbyid ("Div_id2");
var node1_2=node1.clonenode (true);//false can only clone basic and not clone an object with the other child nodes below
, the default parameter is False. When the parameter is true, the
node1.parentNode.replaceChild (NODE1_2,NODE2) is cloned together;
Effect Chart:
All the source code:
<! DOCTYPE html>
The above is for you to share how to automate the creation of Web page elements through JavaScript method, I hope to help you learn.
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
