Як вставити елемент як перша дитина?


96

Я хочу додати 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> 

Відповіді на це питання також працюють із порожнім списком дочірніх елементів div. Чудово!
Роланд

Відповіді:


163

Спробуйте $.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" />


проблема з цим рішенням полягає в тому, що він вставляється як перший дочірній матеріал, а не перед нащадками списку, якщо батьківський контейнер містить різні дочірні елементи, і один хоче вставити його перед певною групою дочірніх вузлів, це не спрацює.
Aurovrata

Спочатку для мене не було очевидним, що це рішення також працює, якщо є нуль дочірніх елементів div. prepend () вставить у порожній список і створить перший дочірній елемент div. Звичайно, додаток () також працює, але список створюється в іншому порядку.
Роланд,

17

Розширюючи те, що сказав @vabhatia, це те, що ви хочете в рідному JavaScript (без JQuery).

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



5
parentNode.insertBefore(newChild, refChild)

Вставляє вузол newChild як дочірній елемент parentNode перед існуючим дочірнім вузлом refChild. (Повертає newChild.)

Якщо refChild має значення null, newChild додається в кінці списку дочірніх організацій. Еквівалентно і зручніше читати, використовуйте parentNode.appendChild (newChild).


буквально скопіювати та вставити з іншого допису. можливо, дати посилання на конкретне питання та як воно пов’язане?
roberthuttinger

1
parentElement.prepend(newFirstChild);

Це нове доповнення в (ймовірно) ES7. Зараз це ванільний JS, ймовірно, завдяки популярності в jQuery. Наразі він доступний у Chrome, FF та Opera. Транспілятори повинні мати можливість обробляти це, поки воно не стане доступним всюди.

PS Ви можете безпосередньо додавати рядки

parentElement.prepend('This text!');

Посилання: developer.mozilla.org - Polyfill


0

Потрібно тут

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

додав

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


-1

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


там немає дочірніх вузлів нижче child-div
Aurovrata

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

це буде вставляти перед кожною дочірньою системою, тобто ви в кінцевому підсумку вставляєте кілька вузлів.
Aurovrata
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.