我试图在原始元素之后放置一个克隆元素。
我做了一些研究，发现了如何创建克隆以及如何将克隆放置在原始副本之后，但我似乎无法将它们放在一起。
这是我的代码：
<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>
我的预期输出是：
每次单击 addButton 时，都会将一个新的文本输入字段放置在文本字段堆栈的底部。该按钮不是堆栈的一部分，并且应始终位于堆栈下方。
我是一个 Javascript 菜鸟。上面的代码可能不正确，也可能不正确。谢谢！
关闭。 :-) 你调用它parent节点（无需再次查找）：
function onClickAdd() {
var tableRow = document.getElementById("tableRow");
var tableRowClone = tableRow.cloneNode(true);
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
// ^^^^^^^^^^^^^^^^^^^--- changes here
}
当然，上面创建了一个无效的 DOM 结构，因为你最终会得到two具有相同的行id value ("tableRow"), and id values must在文档中是唯一的。所以：
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
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
