Home > Others

Javascriptdom Programming Art _ Learning Notes _ knowledge points dynamic creation of tags

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Traditional technologies: Document.Write and InnerHTML

Deep anatomy of DOM Methods: Write () for createelement, createTextNode, AppendChild, and InsertBefore 7.1.1 document.writedocument objects method to easily and quickly insert a string into a document. The biggest disadvantage of document.write is that it violates the principle that "behavior should be separated from performance". 
1 document.write ("<p>this is inserted.</p>");

The 7.1.2 innerHTML Property innerHTML property can be used to read and write HTML content in a given element. 
1 function () {2  var testdiv = document.getElementById ("Testdiv"); 3 alert (testdiv.innerhtml); 4 }

Using this technique, you cannot differentiate between inserting a piece of HTML content and replacing a piece of HTML content. The HTML content in the TESTDIV element does not matter: once you have used the innerHTML attribute, all its contents will be replaced. 
1 function () {2  var testdiv = document.getElementById ("Testdiv"); 3  testdiv.innerhtml = "<p>i inserted <em>this</em> content.</p>"; 4 }
The innerHTML attribute is more recommendable than the Document.writer () method. Using the innerHTML property, you can separate the JavaScript code from the markup.  There is no need to insert <script> tags in the <body> section of the tag. The 7.2 Dom method Dom is a representation of the document. The information contained in the DOM corresponds to the information in the document one by one. If you learn to ask the right question (using the correct method), you can get the details of any node in the DOM node tree. The DOM is a two-lane road. Not only can you get the contents of the document. You can also update the contents of a document. If you adapt the DOM node tree, the document will appear in the browser and the effect changes. You've seen the magic of the SetAttribute method. With this method you can change an attribute node on the DOM node tree, and the relevant document will change in the browser rendering accordingly. However, the SetAttribute method does not change the physical contents of the document, and if you open the document with a text editor instead of a browser, we will not see any changes. You can only see changes in document rendering when you open that document in a browser. This is because the browser actually displays the DOM node tree. In the browser's view, the DOM node tree is the document. Once you understand this, it's not so hard to understand how to create tags dynamically. Instead of creating a tag, you are changing the DOM node tree. The key to doing this is to think about the problem from the DOM's point of view. In the DOM's view, a document is a node tree. If you want to add content to the node tree, you must insert a new node. If you want to add some markup to the document, you must insert the element node. The 7.2.1 createelement method creates a new element, which is done using the DOM method createelement. 
1 document.createelement (nodename);
The following statement creates a P element: 
1 document.createelement ("P");
The method itself does not affect the performance of the page, but it also needs to insert the newly created element into the document. To do this, you need to have something to refer to the newly created node. 
1 var para = document.createlement ("P");
The variable para now contains a reference to the P element that was just created. Now, although the newly created P element already exists, it's not part of any DOM node tree, it's just an orphan wandering around the JavaScript world. This is known as document fragmentation, which cannot be displayed in the browser's window screen, fragment. However, it already has its own dom properties like any other node. 7.2.2 AppendChild method The simplest way to insert a newly created node into the node tree of a document is to call it a child node of an existing node in the document. 
1 parent.appendchild (Child) 2 var para = document.createelement ("P"); 3 var testdiv = document.getElementById ("Testdiv"); 4 Testdiv.appendchild (para);

The 7.2.3 createTextNode method creates a text node that can be implemented using the createTextNode method, and the CreateElement method creates the element node. 
1 document.createTextNode (text) 2 document.createtextnode ("Hello World"); 3 var txt = document.createtextnode ("Hello World");
The variable txt now contains references to those newly created text nodes. You can use the AppendChild method to insert the text node as a child of an existing element. I will insert this text node into the P element that I created in the previous section. 
 1  window.onload = function   () { 2  var  para = Document.createelement ("P"  3  var  testdiv = document.getElementById ( "Testdiv"  4   Testdiv.appendchild (para);  5  var  txt = document.createtextnode (" Hello World ");  6   Para.appendchild (TXT);  7 }
This example creates and inserts nodes in the following order: (1) creates a P element node. (2) append the P element node to an element node in the test.html document. (3) Create a text node. (4) Append the text node to the node of the P element you just created. The AppendChild method can also be used to connect nodes that have not yet become part of the document tree. In other words, the following sequence of steps can also achieve the goal. (1) Create a P element node. (2) Create a text node. (3) Append this text node to the P element node created by step 1th. (4) Append the P element node to an element node in the test.html document. Here are the functions written in the new step: 
1 function () {2     var para = document.createelement ("P"); 3     var txt = document.createtextnode ("Hello World"); 4     para.appendchild (TXT); 5     var testdiv = document.getElementById ("Testdiv"); 6     Testdiv.appendchild (para); 7 }

7.2.4 a more complex combination <p>this is <em>my</em> content.</p> These HTML content corresponds to a P element node, which itself contains the following sub-nodes. A text node whose contents are "This is" an element node "em", the element node itself also contains a text node, the content is "my" a text node, the content is "contents." After figuring out which nodes need to be created, you need to do the steps.
    1. Create a P element node and assign it to the variable para.
    2. Create a text node and assign it to the variable txt1.
    3. Append the txt1 to the para.
    4. Create an EM element node and assign it to the variable emphasis.
    5. Create a text node and assign it to the variable txt2.
    6. Append the txt2 to the emphasis.
    7. Append the emphasis to the para.
    8. Create a text node and assign it to the variable TXT3.
    9. Append the txt3 to the para.
    10. Append the para to the Testdiv element in the test.html document.
1Window.onload =function(){2     varPara = document.createelement ("P");3     varTXT1 = document.createTextNode ("This is");4 Para.appendchild (TXT1);5     varemphasis = document.createelement ("em");6     varTXT2 = document.createTextNode ("My");7 Emphasis.appendchild (TXT2);8 Para.appendchild (emphasis);9     varTXT3 = document.createTextNode ("content.");Ten Para.appendchild (TXT3); One     varTestdiv = document.getElementById ("Testdiv"); A Testdiv.appendchild (para); -}

Another way of thinking: You can create all the nodes first, and then connect them together.
    1. Create a P element node and assign it to the variable para.
    2. Create a text node and assign it to the variable txt1.
    3. Create an EM element node and assign it to the variable emphasis.
    4. Create a text node and assign it to the variable txt2.
    5. Create a text node and assign it to the variable TXT3.
    6. Append the txt1 to the para.
    7. Append the txt2 to the emphasis.
    8. Append the emphasis to the para.
    9. Append the txt3 to the para.
    10. Append the para to the Testdiv element in the test.html document.
1Window.onload =function (){2     varPara = document.createelement ("P");3     varTXT1 = document.createTextNode ("This is");4     varemphasis = document.createelement ("em");5     varTXT2 = document.createTextNode ("My");6     varTXT3 = document.createTextNode ("content.");7 Para.appendchild (TXT1);8 Emphasis.appendchild (TXT2);9 Para.appendchild (emphasis);Ten Para.appendchild (TXT3); One     varTestdiv = document.getElementById ("Testdiv"); A Testdiv.appendchild (para); -}

Javascriptdom Programming Art _ Learning Notes _ knowledge points dynamic creation of tags

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
art of multiprocessor programming art of programming knuth art of programming donald knuth knuth art of computer programming art of computer programming pdf art of programming embedded systems art of computer programming volume 1 pdf

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More