javascript - Append table row to table using getElementByID? -

I want to add an additional line to my table. The way the code is now, it connects just two input boxes outside the table, no matter where I put it. When I check in my browser, it seems that the table tags have been stripped, is there something wrong with using getElementByID function?

To add my hidden row to the table:

  & lt; Div id = "rowToBeAdded" style = "display: none" & gt; & Lt; TR & gt; & Lt; Td> & Lt; Input type = "button" value = "remove" onclick = "this.parentNode.parentNode.removeChild (this.parentNode);" / & Gt; & Lt; / TD & gt; & Lt; Td> & Lt; Input style = "margin-right: 2em;" Type = "text" value = "" name = "new linux []" size = "50" /> gt; & Lt; / Td> & Lt; Td> & Lt; Input type = "text" value = "http: //" name = "new link address []" size = "50" /> gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Div & gt;   
 I have the following  and   of my table:  
   & Lt; / Span & gt;   
 And here is my javascript:  
  function init () {document.getElementById ('moreFields'). Onclick = moreFields; MoreFields (); } Function moreFields () {var newFields = document.getElementById ('rowToBeAdded'). Clonnode (true); NewFields.style.display = 'block'; Var newField = newFields.childNodes; Var insertHere = document.getElementById ('addRowHere'); InsertHere.parentNode.insertBefore (Newfields, insertHere); }   
 
 
 try it  
 EDIT: Determine remove button  
  document.getElementById ('more fields'). Onclick = addMoreFields; // set binding var newRow = document.getElementById ('rowTemplate'). Clonnod (true), myTable = document.getElementById ('myTable'); Function addMoreFields () {myTable.appendChild (newRow.cloneNode (true)); }   
 And you should also create a function to delete a line. Try it yourself. And use classes and IDs to achieve your elements.