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

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. Большой!
Roland

Ответы:

164

Попробуйте $.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. Конечно, append () тоже работает, но список создается в другом порядке.
Роланд
18

Продолжая то, что сказал @vabhatia, это то, что вы хотите в собственном JavaScript (без JQuery).

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

dtsn
источник
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>'); });

Чинтан7027
источник
-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>");
Sayed
источник
это будет вставлено перед каждым дочерним элементом, т.е. вы в конечном итоге вставите несколько узлов.
Aurovrata