1

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

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

这是我的代码：

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

4

3 回答 3

5

关。:-) 您在父节点上调用它（无需再次查找）：

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
}
于 2012-06-20T10:26:53.943 回答
2

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

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

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

于 2012-06-20T10:26:03.803 回答
1 
function onClickAdd() {
    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}

和演示。

于 2012-06-20T10:28:59.897 回答