Добавить до последнего ребенка

У меня есть div с идентификатором wrapper, и я использую .append() для вставки некоторого содержимого в конце этого div, например:

$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');

Однако, я также хочу, чтобы вставить новый дочерний элемент в конец content div в обертке.

Итак, если вывод HTML выглядит так:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Я хочу вставить элемент перед последним, поэтому я получаю следующее:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Third
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Как мне это сделать?

Ответ 1

Вы можете использовать .before(), чтобы добавить брата перед элементом:

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

.insertBefore() делает то же самое с другим синтаксисом, а именно: вы выбираете элемент, который хотите добавить, и пропускаете элемент, который хотите добавить, раньше.

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Ответ 2

Вы можете использовать insertBefore():

$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');

Или before():

$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');

Ответ 3

Выберите последний элемент с :last-of-type и используйте before(), чтобы добавить новый элемент:

$('.content:last-of-type').before('<div class="new">test</div>');

.new { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Ответ 4

Используйте insertBefore:

$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');

Вставьте каждый элемент в набор согласованных элементов до цели.

Демо: http://api.jquery.com/insertBefore/

Ответ 5

Вот как я туда попал:

http://jsfiddle.net/lharby/00tk6avg/

var htmlString = '<div class="content"><div class="subcontent">Some stuff</div></div>'


$(htmlString).insertBefore('.content:last-child');

Ответ 6

$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );

Ответ 7

Вы можете last() для выбора последнего элемента и before() для добавления

$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class=" content ">
        <div class="subcontent ">
            First
        </div>
    </div>
    <div class="content ">
        <div class="subcontent ">
            Second
        </div>
    </div>
</div>

Ответ 8

вы можете использовать n-й последний дочерний элемент, чтобы выбрать второй последний div. скрипка: http://jsfiddle.net/08ta9wnL/

HTML:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function(){
    $("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});

Ответ 9

Вы можете сделать это следующим образом:

$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");

Посмотрите на скрипку https://jsfiddle.net/48ebssso/