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!
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!
Share Improve this question asked Jun 20, 2012 at 10:22 paperclippaperclip 6602 gold badges8 silver badges23 bronze badges3 Answers
Reset to default 6Close. :-) 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
}
You have to use insertBefore on the parent element:
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
And do not forget to change the id. IDs must be unique.
And, in the inline event, Javascript: is obsolete. It doesn't cause any errors, because it's being interpreted as a label.
function onClickAdd() {
var tableRow = document.getElementById("tableRow");
var tableRowClone = tableRow.cloneNode(true);
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}
And the demo.