Question

我有一段这样的代码 -

<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按钮多次？

Answer 1

因为只有一个克隆。

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>

还通过删除全局变量并使用不显眼的事件侦听器为您修复代码。

Answer 2

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

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

将cloneNodex =移出load进入addVtier，您应该获得多份副本。

JavaScript：cloneNode和appendChild无法按预期工作

2 个答案: