Dynamic Operation DOM Node JS implementation

Source: Internet
Author: User

Recently read the "JavaScript Object-oriented Programming Guide" This book, reading the browser environment chapter, gradually understand that JS as a scripting language, need to rely on the host environment to implement the function, from the browser perspective, is the browser's BOM and DOM operation. Dom operations can be divided into: Access, modify, delete, new. Each operation has unique methods and properties. The following is an example of the access, new, and deleted features of the DOM node (see article).

<input  left:392px; Position:absolute; top:128px "type=" button "value=" Add "onclick=" Add () "  ><input  left:392px; Position:absolute; top:128px "type=" button "value=" Remove "onclick=" remove () "  >  <table id=" Table1 "  border=" 1 "> </table>
function add ()//Dynamic Add Table example    {  var parnode = document.getElementById ("Table1");     var tr=document.createelement ("tr");    var td = Document.createelement ("TD"); Create a new element node for the TD type     Td.appendchild (document.createTextNode ("This is the first column"));     Tr.appendchild (TD);           var td = Document.createelement ("TD"); Create a new element node for the TD type        Td.appendchild (document.createTextNode ("This is the second column"));        Tr.appendchild (TD);        Parnode.appendchild (TR); }function Remove () {var Parnode=document.getelementbyid ("Table1"); var tr=document.getelementsbytagname ("tr"); alert (TR),///From here to see TR as nodelist node table, so the deletion node needs to specify which needs to delete Parnode.removechild (tr[0]);}

First, create two button elements in the HTML, and click the response add and remove functions, respectively. Within two functions getElementById, Getelementbytagname is a quick way to access DOM elements, and createelement and createTextNode are methods for creating new elements and text content, respectively. RemoveChild is also the answer to the reference article comment for the method of removing the child element.


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.