Question

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

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

这是我的代码：

<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中的总菜鸟。上述代码可能不正确，也可能不正确。谢谢！

Answer 1

关闭。 :-)你在父节点上调用它（不需要再次查找）：

function onClickAdd() {

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

当然，上面创建了一个无效的DOM结构，因为你最终得到的两个行具有相同的id值（"tableRow"）和{{1}值必须在文档中是唯一的。所以：

id

Answer 2

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

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

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

Answer 3

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

demo。

在原始文件后插入克隆

3 个答案: