Inserting a clone after the original
<p>I'm trying to place a clone element after the original element.</p>

<p>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.</p>

<p>Here is my code:</p>

<pre><code>&lt;html&gt;

&lt;head&gt;

&lt;script type="text/javascript"&gt;

function onClickAdd() {

    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    document.getElementById("tableRow").insertBefore(tableRowClone, tableRow.nextSibling);
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;    
    &lt;table&gt;
        &lt;tr id="tableRow"&gt;
            &lt;td&gt;
                &lt;input type="text" name="textField"&gt;
            &lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="button" name="addButton" value="Add" onClick="Javascript:onClickAdd()"&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>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.</p>

<p>I'm a total noob in Javascript. The code above may or may not be incorrect. Thanks!</p>
