在原始克隆之后插入克隆

Inserting a clone after the original

本文关键字：插入 之后 原始      更新时间：2023-09-26

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

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

这是我的代码：

<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
}

您必须在父元素上使用insertBefore：

tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);

并且不要忘记更改id.ID 必须是唯一的。
而且，在内联事件中，Javascript:已过时。它不会导致任何错误，因为它被解释为标签。

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

还有演示。

相关文章：