JavaScript creates elements and delete elements instance summary

This example describes the JavaScript creation element and delete elements. Share to you for your reference, specifically:

1, create an element

Dynamically create a new DOM element, is one of the important means of the JS operating web object model.

   www.jb51.net creates new elements   // Create new elements Function CreateNewElements () {// creates new element VAR P1 = Document.GtelementById ("p1"); // Set InnerHtml = " My DOM text 1 "; // Using CreateElement Create a new element var span = document.createElement ("span"); // creates a text node span.appendchild ("My DOM Text 2)); var P2 = Document.GtelementByid ("p2"); // Mount P2.Appendchild (span);}        

Operation effect:

Creating new elements typically have twoMethod:
1, directly modify the InnerHTML element of the parent element;

2, use createElement () to create, and use the AppendChild () Mounting of the DOM element.

javascript创建元素和删除元素实例小结 The first method is simpler, and it is also easy to understand, but it is necessary to modify the HTML content included in the entire parent element. If the parent element is originally included, some HTML content is included, and the DOM mount is performed. The efficiency will be lower; the second method is relatively flexible, the efficiency is also higher, but it is more complex.

2, deleting elements

Deleting elements refer to thoroughly removing this DOM element, not hidden. Typically, it is the most common way to use RemoveChild ().

www.jb51.net Delete Elements

// Remove Element Function DeleteElement ) {// Get ready to delete the DOM var del = document.getlementByid (“DEL”); // Call the delete function completely remove del.parentnode.removechild (DEL);}

           due to RemoveChild () is the operation of the child element, not its own deletion. So, you need to get the parent element of the element to be deleted, then call the function. In this example, you will get the parent element to be deleted using the ParentNode property, and then delete the target element.  

3. Delete all sub-elements

Delete all sub-elements
/ / Delete the function of the element function deletechilds () {// Get the parent DOM var ul = document.getlements [0] [0]; // Judgment whether the child element IF (ul.haschildnodes ()) {var len = Ul.childNodes.Length; // Sub-element number for (var i = 0; i

Item1

item2

Item 4
      Analysis: Delete child elements, can pass JS Realized  RemoveChild () , in addition, the other thing that needs to be recognized is that during the process of traversing the deletion node, each of the number of child elements will be less, therefore, The sample code always deletes the first child element until there is no child element.  < len; i++) {     //遍历
          ul.removeChild(ul.childNodes[0]);//从第一个元素开始删除
        }
      }
    }
    Note:  
  • Document.getlementsBytagname ("UL")
  • Returns an array, which is the first element of this array, and the UL tag in this page is one, so it is this UL tag.
  • Interested friends You can use
  • online HTML / CSS / JavaScript code running tool
  • : http: //tools.jb51.net/code/htmljsrun Tests the code running effect.
More about JavaScript Related Contents View this Topic: "JavaScript Operation DOM Skation Summary", "JavaScript Page Element Operation Skills Summary", "JavaScript Event Information and Skills", "JavaScript Find Algorithm Tips Summary "," JavaScript Data Structure and Algorithm Skill Summary "," JavaScript Overclic Algorithm and Skills Summary "and" JavaScript Error and Debug Skill Summary "
I hope this article will help you JavaScript programming.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment