Javascript 和 DOM - insertBefore 只执行一次

Question

我有一个简单的脚本，可以将表格行复制到全局 javascript 变量(我知道在 javascript 中使用全局变量不是一个好主意，但这仅用于开发) 和一个函数在“onClick”事件中插入该行的副本。

它执行并插入一行。问题是它只会插入一行一次。

这是一个示例表

<table id="myTable">
    <tbody>
        <tr id="copyRow">
            <td>Sample Cell</td>
        </tr>
        <tr>
            <td><a href="javascript:void();" onClick="insertRow(copy_row, this.parentNode.parentNode.parentNode)">Insert Row</a></td>
        </tr>
    </tbody>
</table>

这是我的示例 javascript:

<script type="text/javascript">
    copy_row = document.getElementByID('copyRow').cloneNode(true); //Runs when page first runs

    function insertRow(insertRow, insertBeforeMe){
     insertBeforeMe.parentNode.insertBefore(insertRow, insertBeforeMe)  
    }
</script>

我被难住了

Answer 1

您应该在每次调用 insertRow 函数时克隆该节点，以便您获得元素的新副本而不是回收一个克隆的行。

copy_row = document.getElementByID('copyRow'); //Runs when page first runs

function insertRow(insertRow, insertBeforeMe){
 insertBeforeMe.parentNode.insertBefore(insertRow.cloneNode(true), insertBeforeMe)  
}