Javascript 在原始文件之后插入克隆_Javascript

Javascript 在原始文件之后插入克隆

javascript

Javascript 在原始文件之后插入克隆,javascript,Javascript,我试图在原始元素之后放置一个克隆元素我做了一些研究，发现了如何创建克隆以及如何将克隆放在原始克隆之后，但我似乎无法将它们放在一起这是我的密码： <html> <head> <script type="text/javascript"> function onClickAdd() { var tableRow = document.getElementById("tableRow"); var tableRowClone = tabl

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

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

这是我的密码：

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


函数onClickAdd（）{
var tableRow=document.getElementById（“tableRow”）；
var tableRowClone=tableRow.cloneNode（true）；
document.getElementById（“tableRow”）.insertBefore（tableRowClone，tableRow.nextSibling）；
}

我的预期产出是：每次单击addButton时，一个新的文本输入字段将放置在文本字段堆栈的底部。按钮不是堆栈的一部分，应该始终位于堆栈下方

我对Javascript一窍不通。上述代码可能不正确，也可能不正确。谢谢

必须在父元素上使用：

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

不要忘记更改

id

。ID必须是唯一的。
而且，在内联事件中，

Javascript:

已过时。它不会导致任何错误，因为它被解释为标签。

必须在父元素上使用：

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

不要忘记更改

id

。ID必须是唯一的。
而且，在内联事件中，

Javascript:

已过时。它不会导致任何错误，因为它被解释为一个标签。

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

当然，上面的操作会创建一个无效的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 }
关闭。：-）在父节点上调用它（无需再次查找）：
当然，上面的操作会创建一个无效的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：？@paperclip Nothing。它是过时的，这意味着您的代码在被删除时运行良好<代码><。。。onClick=“onClickAdd（）；”>。值得注意的是：JavaScript区分大小写，而HTML则不区分大小写。因此，
onClickAdd
只能用一种方式拼写，但是
onClick
也可以用其他大写字母拼写，比如
onClick
，在内联事件中，
Javascript:
已经过时了“实际上，没有；它从来都不是必需的或正确的。
javascript:
伪协议（并且一直都是）仅在需要URI的属性中使用，例如
a
元素上的
href
。（如果需要，您仍然可以这样做，尽管最好不要将代码放入
href
）它从未在
onXyz
中使用过。onXyz
onXyz
中的文本是JavaScript代码（正如您所说，在那里使用它会创建一个脚本）。我应该使用什么来代替JavaScript:？@paperclip Nothing。它是过时的，这意味着您的代码在被删除时运行良好<代码><。。。onClick=“onClickAdd（）；”>。值得注意的是：JavaScript区分大小写，而HTML则不区分大小写。因此，
onClickAdd
只能用一种方式拼写，但是
onClick
也可以用其他大写字母拼写，比如
onClick
，在内联事件中，
Javascript:
已经过时了“实际上，没有；它从来都不是必需的或正确的。
javascript:
伪协议（并且一直都是）仅在需要URI的属性中使用，例如
a
元素上的
href
。（如果需要，您仍然可以这样做，尽管最好不要将代码放入
href
）它从未在
onXyz
中使用过。
onXyz
中的文本是JavaScript代码（正如您所说，在那里使用它会创建一个新的脚本）。