Home > Developer > JavaScript
JavaScript automatically generates webpage elements (buttons, text, etc.). javascript automatically generates
Method for creating elements:
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 type = "button" value = "replaceNode Node 2 Replace" onclick = 'remove2 ()'/> <! -- 1 replace 2, and 1 is not retained --> <input type = "button" value = "clone Replace" onclick = 'clone () '/> <div id = "div_id1"> This is the div module -- </div> <div id = "div_id2"> you must learn well, in this way, you can get a good return </div> <div id = "div_id3"> good job, come on (^ ω ^) </div> <div id = "div_id4"> you know the area, experiment area </div> </body>
Method 1: Create a text document
<Span style = "font-size: 18px;"> function addNode1 () {// 1 use createTextNode () to create a text object var text = document. createTextNode ("this is modified, the document created"); // 2 get the div object var node1 = document. getElementById ("div_id1"); // Add the child node1.appendChild (text) ;}</span> <span style = "font-size: 24px; "> </span>
Method 2: Create a tag object using createElement ()
Function addNode2 () {// 1. Use createElement () to create a label object var nn = document. createElement ("input"); nn. type = "button" nn. value = "button created"; nn.tar get = "_ blank"; // 2, get the div object var node2 = document. getElementById ("div_id2"); // Add the child node2.appendChild (nn) as the div object );}
Method 3: directly use an attribute in the container tag: innerHTML ----- essentially modifying the "html code" in the tag container, which is not an operation of the object tree we think.
Function addNode3 () {var mm = document. getElementById ("div_id3"); mm. innerHTML = "<a href = 'HTTP: // www.baidu.com '> <input type = 'button 'value = 'new click'> </a> ";}
You can use removeNode or removeChild to delete child nodes from an element. The second method is usually used.
Function removenode () {var node = document. getElementById ("div_id4"); // alert (node. nodeName); // DIV // suicide node. removeNode (true); // removeNode deletes an object from the document level. Internet Explorer may occur. Generally, no suicide node is used. parentNode. removeChild (node); // delete its child from the parent node. Generally, alert ("aa ");}
Function remove2 () {var node1 = document. getElementById ("div_id1"); var node2 = document. getElementById ("div_id2"); // node1.replaceNode (node2); // replace a child with a parent node: replace node2 node1.parentNode with node1. replaceChild (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: only the basic node can be cloned. The following subnode is not cloned. // an object is cloned, the default value is false. When the parameter is true, the child node is connected to clone node1.parentNode. replaceChild (node1_2, node2 );}
:
All source code:
<! DOCTYPE html>The above is to share with you how to use JavaScript to automatically generate Web page elements. I hope this will be helpful for your learning.
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
