Javascript和DOM - insertBefore只执行一次

Javascript and DOM - insertBefore Only Excutes Once

本文关键字:一次 执行 DOM insertBefore Javascript      更新时间:2023-09-26

我有一个简单的脚本,将表行复制到全局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>
我难住了

应该在每次调用insertRow函数时克隆节点,以便获得元素的新副本,而不是循环使用克隆的一行。

copy_row = document.getElementByID('copyRow'); //Runs when page first runs
function insertRow(insertRow, insertBeforeMe){
 insertBeforeMe.parentNode.insertBefore(insertRow.cloneNode(true), insertBeforeMe)  
}

它甚至不应该运行一次。JavaScript是区分大小写的,所以必须使用:

document.getElementById

document.getElementByID

这是我的工作版本的脚本。