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

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

Попробуйте $.prepend() функцию.

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

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

Demo

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" />

Ответ 3

parentNode.insertBefore(newChild, refChild)

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

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

Ответ 4

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

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

Ответ 5

parentElement.prepend(newFirstChild);

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

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

parentElement.prepend('This text!');

Ссылки: developer.mozilla.org - Polyfill

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

добавлен

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