Question

我正在尝试复制一些div。我能够做到这一点，但是，当我的div重复时，它会被复制到我的其他内容之上。我希望它在同一个div中重复，但它似乎是在div之外做的。以下是我的代码，有什么建议吗？

我认为问题出在javascript函数的最后一行，父节点追加了孩子，但我不确定。

JS

<script>
    document.getElementById('button').onclick = duplicate;

    var i = 0;
    var original = document.getElementById('duplicator');

    function duplicate() {
        var clone = original.cloneNode(true); 
        clone.id = "gamesdiv" + ++i;
        original.parentNode.appendChild(clone);
    }
</script>

HTML / MARKUP

<div id="gamesdiv">
    <div id="duplicator">
        <table>
            <tr>
                <td>type</td>
                <td><asp:TextBox ID="gamestype" runat="server" Height="16px" Width="92px"></asp:TextBox></td>
                <td>name of game: </td>
                <td><asp:TextBox ID="namegame" runat="server" Height="17px" Width="118px"></asp:TextBox></td>
            </tr>
        </table>   
    </div>
</div>

<button id="button" onclick="duplicate()">Add new game</button>

gamesdiv是我想要复制的div，'duplicator'div是我复制的div。如果您想查看我的HTML代码，请询问

Answer 1

好像你有两个问题：

第一个是gamesdiv高度设置为85，这限制了它。

接下来，某些标记的关闭无效（您的div看起来像<div/>而不是</div>

我在这里解决了这两个问题，并略微调整了你的风格：

http://jsfiddle.net/xDaevax/7LLXZ/

Answer 2

请检查这个js小提琴：http://jsfiddle.net/Gb69f/

它解决了你的问题与否？如果没有那么请告诉我是什么问题？

<强>的JavaScript

    document.getElementById('button').onclick = duplicate;

    var i = 0;
    var original = document.getElementById('duplicator');

    function duplicate() {
        var clone = original.cloneNode(true); 
        clone.id = "gamesdiv" + ++i;
        original.parentNode.parentNode.appendChild(clone);
    }

在外部div内部重复内部div

2 个答案: