如何将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

请参阅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在评论中指出的那样，相邻地插入节点有很好的功能：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);
}

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside> <div id="sidebar" class="nav-collapse "> <!-- sidebar menu start--> <ul class="sidebar-menu" id="nav-accordion"> <p class="centered"><a href="profile.html"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p> <li class="mt"> <a href="dashboard.php"> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </a> </li> <li class="sub-menu"> <a href="javascript:;" > <i class="fa fa-cogs"></i> <span>Option 1 </span> </a> <ul class="sub"> <li><a href="profile.php">Sub Option 1</a></li> <li><a href="#">Sub Option 2</a></li> </ul> </li> <li class="sub-menu"> <a href="#" > <i class="fa fa-book"></i> <span>Option 2</span> </a> </li> <li class="sub-menu"> <a href="javascript:;" > <i class="fa fa-comment"></i> <span>Option 3</span> </a> <ul class="sub"> <li><a href="#">Sub Option 1</a></li> <li><a href="#">Sub Option 2</a></li> </ul> </li> <li class="sub-menu"> <a href="#" > <i class="fa fa-tasks"></i> <span>Option 4</span> </a> </li> </ul> <!-- sidebar menu end--> </div> </aside>将节点作为节点的最后一个子节点插入。在这种情况下，这是在“添加更多”按钮之后，因为您的列表和按钮是同一元素中的子项。

解决方案1 ​​

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

appendChild

解决方案2

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

<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>

解决方案3（不推荐）

附加“添加更多”按钮，附加新乐器项目，将其放回列表末尾。