javascript - 在外部 div 内复制内部 div

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/标记

<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，而“复制器”div 是我正在复制的 div。如果您想查看我的 html 代码，请询问

Answer 1

看来您有两个问题:

首先是gamesdiv的高度设置为85，限制了它。

接下来，一些标记有一个无效的关闭(你有一个看起来像 <div/> 而不是 </div> 的 div

我已经解决了这两个问题并稍微调整了您的样式:

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