Question

我有两个HTML分区几乎相同。我需要在原始div之后添加第一个div的克隆，但是在第二个div之前。

这是我试过的代码。

<body>


        <div id="2ndPayDiv">
            <label id="2ndPayLbl">Payment No 2: </label>
            <input type="text" />
            <input type="text" /> 
        </div>

        <div id ="totPayForm" >
            <label id="2ndPayLbl">Total Payment: </label>
            <input type="text" />
            <input type="text" /> 
            <input type="submit" value="Add new one"  onclick="addNewField();return false;">
        </div>

        <script>
            var i=3;
            function addNewField() {

                var myDiv = document.getElementById("2ndPayDiv");
                var divClone = myDiv.cloneNode(true); // the true is for deep cloning

                var totDiv = document.getElementById("totPayForm");
                var parentDiv = totDiv.parentNode;
                parentDiv.insertBefore(divClone, totDiv);

                document.getElementById('2ndPayLbl').innerHTML = 'Payment No '+i++ +':';

            }
        </script>


    </body>

我的第一个div是2ndPayDiv。我需要在它之后有一个克隆，但在每次单击按钮时都在div totPayForm之前。但它表现得出乎意料。它创建克隆并将其放在所有内容之前。我该如何解决这个问题

Answer 1

为什么不将2ndPayDiv包裹在div中，并使用appendChild？

    <div>
        <div id="2ndPayDiv">
            <label id="2ndPayLbl">Payment No 2: </label>
            <input type="text" />
            <input type="text" /> 
        </div>
    <div>

JS：

       function addNewField() {

            var myDiv = document.getElementById("2ndPayDiv");
            var divClone = myDiv.cloneNode(true); // the true is for deep cloning

            var parentDiv = myDiv.parentNode;
            parentDiv.appendChild(divClone);

            document.getElementById('2ndPayLbl').innerHTML = 'Payment No '+i++ +':';

        }

制作HTML分区的克隆

1 个答案: