JavaScript:cloneNode和appendChild未按预期工作_Javascript

JavaScript:cloneNode和appendChild未按预期工作

javascript

JavaScript:cloneNode和appendChild未按预期工作,javascript,Javascript,我有一段这样的代码- <script> var x,m,cloneNodex; function addVtier() { m.appendChild(cloneNodex); } function load() { x = document.getElementById("vtier#1"); cloneNodex = x.cloneNode(true); m = do

我有一段这样的代码-

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


变种x，m，克隆节点；
函数addVtier（）{
m、 附属物（克隆诺德）；
}
函数加载（）{
x=document.getElementById（“vtier#1”）；
cloneNodex=x.cloneNode（真）；
m=document.getElementById（“main”）；
}
克隆
1.供应商名称：
沃尔沃汽车
萨博
梅赛德斯
奥迪

现在我的问题是，为什么这只会附加克隆节点，即id为=“vtier#1”的表一次，而不是按克隆按钮的次数？

附加作为DOM一部分的节点首先会将其从其当前位置移除，因此通过两次添加同一节点不会得到两个克隆

这似乎是您正在做的事情，您只调用了一次

cloneNode

，而不是每次单击克隆按钮

将

cloneNodex=

从

load

移到

addVtier

中，您应该会得到多个副本。

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

这似乎是您正在做的事情，您只调用了一次

cloneNode

，而不是每次单击克隆按钮

将

cloneNodex=

从

load

移到

addVtier

中，您将获得多个副本。

因为只有一个克隆

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>


克隆
1.供应商名称：
沃尔沃汽车
萨博
梅赛德斯
奥迪
（功能（）{
var main=document.getElementById（“main”），
vtier=document.getElementById（“vtier#1”）.cloneNode（true）；
document.getElementsByTagName（“按钮”）[0]。addEventListener（“单击”，addClone）；
函数addClone（）{
main.appendChild（vtier.cloneNode（true））；
}
}());

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

因为只有一个克隆

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>


克隆
1.供应商名称：
沃尔沃汽车
萨博
梅赛德斯
奥迪
（功能（）{
var main=document.getElementById（“main”），
vtier=document.getElementById（“vtier#1”）.cloneNode（true）；
document.getElementsByTagName（“按钮”）[0]。addEventListener（“单击”，addClone）；
函数addClone（）{
main.appendChild（vtier.cloneNode（true））；
}
}());

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

Should

m.appendChild（nodex）bem.appendChild（克隆节点）？应m.appendChild（nodex）bem.appendChild（克隆节点）？是m.appendChild（nodex）应该是m.appendChild（cloneNodex）；为什么将cloneNodex=移出加载到addVtier中会起作用？你能建议一下吗，迈克？@linusunisfed，addVtier
每点击一次按钮就会被调用一次<代码>加载
在每页加载时调用一次。如果您想为每个按钮创建一个克隆，请单击您无法在load
中执行。Mike，如果我要创建同一个克隆两次，该怎么办？如果每次我想创建克隆时都调用cloneNode（），那么这个cloneNode（）可能在第一次调用和第二次调用之间发生了变化。那么我该怎么办？@linusunisfed，如果您担心更改，请尽早创建一个克隆并存储它，然后在addVtier
中克隆它。是的，m.appendChild（nodex）应该是m.appendChild（cloneNodex）；为什么将cloneNodex=移出加载到addVtier中会起作用？你能建议一下吗，迈克？@linusunisfed，addVtier
每点击一次按钮就会被调用一次<代码>加载
在每页加载时调用一次。如果您想为每个按钮创建一个克隆，请单击您无法在load
中执行。Mike，如果我要创建同一个克隆两次，该怎么办？如果每次我想创建克隆时都调用cloneNode（），那么这个cloneNode（）可能在第一次调用和第二次调用之间发生了变化。那么我该怎么办？@linusunisfed，如果您担心更改，请尽早创建一个克隆并将其存储，然后在addVtier
中克隆该克隆。我的问题是，在我的原始代码中，我正在克隆的div元素包含另一个具有添加按钮的表，该按钮可将行动态添加到表中。现在的问题是，如果有人先按这个添加按钮，然后单击克隆，那么它将加载这个新表，该表的行数超过默认行数，而不是加载默认表（最初，在加载页面时），该表的行数超过默认行数。现在，如果我将cloneNodex添加到addVtier（）中，如何避免克隆默认表的问题？@linusunisfed同时执行这两项操作。。。在click handler外添加了一个初始的cloneNode
。我的问题是，在我的原始代码中，我正在克隆的div元素包含另一个表，该表有一个ADD按钮，可以动态地向表中添加行。现在的问题是，如果有人先按这个添加按钮，然后单击克隆，那么它将加载这个新表，该表的行数超过默认行数，而不是加载默认表（最初，在加载页面时），该表的行数超过默认行数。现在，如果我将cloneNodex添加到addVtier（）中，如何避免克隆默认表的问题？@linusunisfed同时执行这两项操作。。。在clic之外添加了一个初始的cloneNode