JavaScript:cloneNode和appendChild未按预期工作

我有一段这样的代码-

<script>
    var x,m,cloneNodex;
    function addVtier() {
            m.appendChild(cloneNodex);
    }
    function load() {
        x = document.getElementById("vtier#1");
             cloneNodex = x.cloneNode(true);
        m = document.getElementById("main");    
    }
</script>
<body onload = load();>
<div  id = "main">
<table id = "vtier#1" width="100%" class="heading">
        <tr>
            <td>
                <button onclick=addVtier();>clone</button> 
            </td>
            <td> 1.Vtier Name:
                <select>
                    <option>Volvo</option>
                    <option>Saab</option>
                    <option>Mercedes</option>
                    <option>Audi</option>
                </select>
            </td>   
        </tr>
</table>
</div>
</body>

现在我的问题是，为什么这只会将克隆的节点（即id为"vtier#1"的表）追加一次，而不会像按下CLONE按钮那样多次？

因为只有一个克隆。

var y = node;
x.appendChild(y);
x.appendChild(y);

只追加y一次，因为只有一个y。

<body>
<div  id = "main">
<table id = "vtier#1" width="100%" class="heading">
        <tr>
            <td>
                <button>clone</button> 
            </td>
            <td> 1.Vtier Name:
                <select>
                    <option>Volvo</option>
                    <option>Saab</option>
                    <option>Mercedes</option>
                    <option>Audi</option>
                </select>
            </td>   
        </tr>
</table>
</div>
<script>
    (function () {
        var main = document.getElementById("main"),
            vtier = document.getElementById("vtier#1").cloneNode(true);
        document.getElementsByTagName("button")[0].addEventListener("click", addClone);
        function addClone() {
            main.appendChild(vtier.cloneNode(true));
        }
    }());
</script>
</body>

还通过删除全局变量和使用不引人注目的事件侦听器为您修复了代码。

添加DOM的一部分节点首先会将其从当前位置删除，这样就不会通过两次添加同一节点来获得两个克隆。

这似乎就是您正在做的事情——您只调用cloneNode一次，而不是每次单击克隆按钮。

将cloneNodex =从load移到addVtier中，您应该会得到多个副本。

相关内容

最新更新

热门标签：