如何将 div 克隆放在原始 div 的正下方？答案

【问题标题】：How to place div clone right under original div?如何将 div 克隆放在原始 div 的正下方？
【发布时间】：2018-11-04 09:30:59
【问题描述】：

我目前有一个“添加更多”按钮，单击该按钮会复制我拥有的 div。当前的问题是当单击按钮并且 div 重复时，它出现在“添加更多”按钮下方。我希望 div 在单击时复制到原始 div 的正下方，这也意味着副本将位于“添加更多”按钮的上方。我该怎么做？

HTML

                    <!-- Instrument Exp. -->
                    <div>
                        <label>What instruments and level do you want to teach?</label>
                        <div class="form-inline justify-content-center" id="ins_1">
                            <!-- Instrument 1 -->
                            <div>
                                <select class="form-control ins">
                                    <option>Instrument</option>
                                    <option>Cello</option>
                                    <option>Clarinet</option>
                                    <option>Drums</option>
                                    <option>Flute</option>
                                    <option>Guitar</option>
                                    <option>Piano</option>
                                    <option>Saxophone</option>
                                    <option>Violin</option>
                                    <option>Vocal</option>
                                    <option>Trumpet</option>
                                </select>
                            </div>

                            <!-- Level 1 -->
                            <div>
                                <select class="form-control lvl">
                                    <option>Level</option>
                                    <option>Beginner</option>
                                    <option>Advanced</option>
                                    <option>Intermediate</option>
                                </select>
                            </div>
                        </div>


                    <!-- Add More -->
                    <div class="text-center" id="add_more">
                        <button type="button" class="no_link" onclick="add_instrument()">Add more +</button>
                    </div>
            </div>

JavaScript

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

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

【问题讨论】：

请不要破坏您的帖子。
请不要通过破坏您的帖子为人们增加工作量。通过在 Stack Exchange (SE) 网络上发帖，您已在 CC BY-SA 3.0 license 下授予 SE 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 SE 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。

标签： javascript html duplicates clone

【解决方案1】：

参见 insertBefore，https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore。如果将其与 nextSibling 结合使用，则可以在其后添加：

var i = 0;
var original = document.getElementById('ins_1');
function add_instrument() {
    var clone = original.cloneNode(true);
    clone.id = "ins_1" + ++i;
    original.parentNode.insertBefore(clone, original.nextSibling);
}

另见：How to insert an element after another element in JavaScript without using a library?

编辑：正如@Tej 在 cmets 中指出的那样，有很好的函数可以相邻插入节点：insertAdjacentHTML 和 insertAdjacentElement。 insertAdjacentElement 需要 IE8+ 或最新的浏览器。

在我看来，这些功能使代码更具可读性：

var i = 0;
var original = document.getElementById('ins_1');
function add_instrument() {
    var clone = original.cloneNode(true);
    clone.id = "ins_1" + ++i;
    original.insertAdjacentElement('afterend', clone);
}

【讨论】：

我想我们也可以试试 insertAdjacentHTML。 developer.mozilla.org/en-US/docs/Web/API/Element/…
这将始终插入到列表中的第一个元素之后，而不是附加到列表的末尾
@GarrettJohnson，我相信这是提问者想要的行为：“我希望 div 在单击时复制到原始 div 的正下方”
@Tej，很好！我不知道那些方法。看起来insertAdjacentElement 可能是要选择的人。
@Steve 抱歉，我粘贴了错误的 URL。这是正确的developer.mozilla.org/en-US/docs/Web/API/Element/…

【解决方案2】：

appendChild 将该节点作为该节点的最后一个子节点插入。在这种情况下，它位于“添加更多”按钮之后，因为您的列表和按钮是同一元素中的子元素。

解决方案 1

将您的新乐器列表放在不同的元素中，以便附加到父元素的末尾具有预期的效果。

<div>
    <label>What instruments and level do you want to teach?</label>
    <div class="items">
        <div class="form-inline justify-content-center" id="ins_1">
            ...
        </div>
    </div>

    <!-- Add More -->
    <div class="text-center" id="add_more">
        <button type="button" class="no_link" onclick="add_instrument()">Add more +</button>
    </div>
</div>

解决方案 2

在“添加更多按钮”之前使用插入和插入。

original.parentNode.insertBefore(clone, addMoreButton);

解决方案 3（不推荐）

添加“添加更多”按钮，将新仪器项添加到列表末尾。

【讨论】：