Блог

Главная - Вопросы по программированию - Как вставить элемент в качестве первого дочернего элемента?

Как вставить элемент в качестве первого дочернего элемента?

#jquery #append

Вопрос:

Я хочу добавлять div в качестве первого элемента с помощью jquery при каждом нажатии кнопки

 <div id='parent-div'>
    <!--insert element as a first child here ...-->

    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>

</div>

Комментарии:

1. Ответы на этот вопрос также работают с пустым списком дочерних элементов div. Отлично!

Ответ №1:

Попробуйте воспользоваться этой $.prepend() функцией.

Использование

 $("#parent-div").prepend("<div class='child-div'>some text</div>");

ДЕМОНСТРАЦИЯ

 var i = 0;
$(document).ready(function () {
    $('.add').on('click', function (event) {
        var html = "<div class='child-div'>some text "   i     "</div>";
        $("#parent-div").prepend(html);
    });
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="parent-div">
    <div>Hello World</div>
</div>
<input type="button" value="add" class="add" />

Комментарии:

1. проблема с этим решением заключается в том, что оно вставляется как первый дочерний элемент, а не перед дочерними элементами списка, если родительский контейнер содержит разные дочерние элементы и требуется вставить перед определенной группой дочерних узлов, это не сработает.

2. Сначала мне не было очевидно, что это решение также работает, если есть нулевые дочерние элементы div. Функция prepend() вставит в пустой список и создаст первый дочерний элемент div. Конечно, функция append() также работает, но список создается в другом порядке.

Ответ №2:

Основываясь на том, что сказал @vabhatia, это то, что вам нужно в родном JavaScript (без jQuery).

ParentNode.insertBefore(<your element>, ParentNode.firstChild);

Ответ №3:

Использование: $("<p>Test</p>").prependTo(".inner"); Ознакомьтесь с документацией .prepend по jquery.com

Комментарии:

1. это позволит вставить несколько узлов, по одному перед каждым дочерним.

Ответ №4:

 parentNode.insertBefore(newChild, refChild)

Вставляет новый дочерний узел узла как дочерний элемент родительского узла перед существующим дочерним узлом refChild. (Возвращает новорожденного.)

Если значение refChild равно null, новый ребенок добавляется в конце списка детей. Эквивалентно и более читабельно используйте parentNode.appendChild(новый ребенок).

Комментарии:

1. буквально скопировал и вставил с другого поста. возможно, дать ссылку на конкретный вопрос и на то, как он связан?

Ответ №5:

 parentElement.prepend(newFirstChild);

Это новое дополнение в (вероятно) ES7. Теперь это ванильный JS, вероятно, из-за популярности в jQuery. В настоящее время он доступен в Chrome, FF и Opera. Транспиляторы должны быть в состоянии обрабатывать его до тех пор, пока он не станет доступен повсеместно.

P.S. Вы можете напрямую добавлять строки

 parentElement.prepend('This text!');

Ссылки: developer.mozilla.org — Полифилл

Ответ №6:

Требуется здесь

<div class="outer">Outer Text
<div class="inner"> Inner Text</div>
</div>

добавлено

$(document).ready(function(){
$('.inner').prepend('<div class="middle">New Text Middle</div>');
});

Ответ №7:

$(".child-div div:first").before("Your div code or some text");

Комментарии:

1. ниже дочерних узлов нет дочерних узлов.

Ответ №8:

 $('.parent-div').children(':first').before("<div class='child-div'>some text</div>");

Комментарии:

1. это будет вставляться перед каждым дочерним элементом, т. Е. вы в конечном итоге вставите несколько узлов.

Метки: