JavaScript automatically generates webpage elements (buttons, text, etc.). javascript automatically generates

Source: Internet
Author: User

JavaScript automatically generates webpage elements (buttons, text, etc.). javascript automatically generates

Method for creating elements:

  • 1. Use createTextNode () to create a Text object
  • 2. Create a tag object using createElement ()
  • 3. directly use an attribute in the container tag: innerHTML ----- essentially modifying the "html code" in the tag container is not an operation of the object tree we think.

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> ";}
  • Delete a node

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 ");}
  • Replace the one that is not retained
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 )}
  • Clone Node
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.