Как поместить div-клон прямо под оригинальный div? - PullRequest
Новая
       24

Как поместить div-клон прямо под оригинальный div?

0 голосов
/ 25 мая 2018

У меня в настоящее время есть кнопка «Добавить еще», которая при нажатии дублирует мой 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);
}

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

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 (не рекомендуется)

Добавьте кнопку «Добавить еще», добавив новый элемент инструмента, чтобы поместить его обратно в конец списка.

0 голосов
/ 25 мая 2018

См. 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);
}

Также см .: Как вставить элемент после другогоэлемент в JavaScript без использования библиотеки?

Редактировать : Как отметил @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);
}
...