Inserting a clone after the original

javascript

Solution

Close. :-) You call it on the parent node (and no need to go look it up a second time):

function onClickAdd() {

    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
//  ^^^^^^^^^^^^^^^^^^^--- changes here
}

Of course, the above creates an invalid DOM structure, because you end up with two rows with the same `id` value (`"tableRow"`), and `id` values must be unique in the document. So:

function onClickAdd() {

    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    // Clear the `id` from the clone
    tableRowClone.id = ""; // To clear it, or include something to give it its own
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
//  ^^^^^^^^^^^^^^^^^^^--- changes here
}

Problem

I'm trying to place a clone element after the original element. I did some research and found out how to create a clone and how to place the clone after the original, but I can't seem to put them together. Here is my code: ``` <html> <head> <script type="text/javascript"> function onClickAdd() { var tableRow = document.getElementById("tableRow"); var tableRowClone = tableRow.cloneNode(true); document.getElementById("tableRow").insertBefore(tableRowClone, tableRow.nextSibling); } </script> </head> <body> <table> <tr id="tableRow"> <td> <input type="text" name="textField"> </td> </tr> <tr> <td> <input type="button" name="addButton" value="Add" onClick="Javascript:onClickAdd()"> </td> </tr> </table> </body> </html> ``` My expected output would be: Upon every click on the addButton, a new text input field will be placed at the bottom of the stack of text fields. The button is not part of the stack, and should always be below the stack. I'm a total noob in Javascript. The code above may or may not be incorrect. Thanks!

Original source