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.