gpt4 book ai didi

javascript - 在原件之后插入克隆件

转载 作者:行者123 更新时间:2023-11-30 07:26:57 25 4
gpt4 key购买 nike

我试图在原始元素之后放置一个克隆元素。

我做了一些研究,发现了如何创建克隆以及如何将克隆放在原始文件之后,但我似乎无法将它们放在一起。

这是我的代码:

<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 菜鸟。上面的代码可能不正确。谢谢!

最佳答案

关闭。 :-) 您在节点上调用它(无需再次查找它):

function onClickAdd() {

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

当然,上面创建了一个无效的 DOM 结构,因为你最终得到 行具有相同的 id 值(“tableRow”) 和 id必须在文档中是唯一的。所以:

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
}

关于javascript - 在原件之后插入克隆件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11117519/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com