javascript - 如何将 div 克隆放在原始 div 的正下方？

Question

我目前有一个“添加更多”按钮，单击该按钮会复制我拥有的 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);
}

Answer 1

参见插入之前，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在评论中指出的那样，有一些很好的函数可以相邻插入节点: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);
}