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

Question

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

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

568 8

jQuery css-selectors prepend

8 ответов:

Comments

Ничего не найдено.

Mohamed Nuur · Accepted Answer · 2015-05-19 23:31:32

попробовать $.prepend()

126

2015-05-19 23:31:32

WizxX20 · Accepted Answer · 2014-02-12 11:47:27

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

dtsn · Accepted Answer · 2015-06-16 11:48:27

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

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

Varun Bhatia · Accepted Answer · 2014-05-14 07:36:46

parentNode.insertBefore(newChild, refChild)
вставляет узел newChild как дочерний элемент parentNode перед существующим дочерним узлом refChild. (Возвращает newChild.)

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

Gibolt · Accepted Answer · 2017-05-08 03:26:01

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

P. S. Вы можете напрямую добавлять строки
parentElement.prepend('This text!');
ссылки:developer.mozilla.org -полифилл

THAS · Accepted Answer · 2014-03-11 13:51:00

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

Sayed · Accepted Answer · 2014-03-14 11:50:11

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

Chintan7027 · Accepted Answer · 2015-08-05 10:57:38

здесь

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

добавил

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