Почему jQuery.after() не связывает новый элемент?

Мне любопытно, почему jQuery.after() не связывает или не предоставляет вам новый элемент, который вы создаете с ним. Мне кажется, что это нужно, но я не эксперт и надеялся, что кто-то может пролить свет на то, почему это плохая идея. Вот пример, чтобы увидеть, что я хотел бы от .after():

Вот несколько разметки:

<div id="content1">
    <p id="hello1">Hello</p>
</div>
<div id="content2">
    <p id="hello2">Hello</p>
</div>

Здесь я хочу, но это заменяет "Hello" на "World!":

$('#hello1').after('<p />').text('World!');

Это выполняет эту работу, но это обязательно уродливо:

$('#hello2').after('<p />');
var $newParagraph = $('#content2 p').last();
$newParagraph.text('World');

Это лучше, но я не полностью продаю: (может быть, я должен быть?)

$('#hello1').after( $('<p />').text('World') );

Обратите внимание, что это, очевидно, упрощенный пример, то есть "<p> World! </p> " не то, что я хочу добавить, моя проблема в мире сложнее, чем это.

Спасибо за любые мысли.

Ответ 1

Предположительно .after() работает так, как позволяет вам цепочки других методов, которые будут применяться к изначально выбранным элементам:

$('#hello1').after( $('<p />').text('World') )
            .before( $('<p />').text('Before text') )
            .remove();

Это совместимо с другими методами, поэтому вам не нужно пытаться запомнить, какие из них возвращают исходный объект и который возвращает какой-либо другой объект.

Обратите внимание, что в вашем случае $('#hello1') выбирает ровно один элемент, поскольку вы выбираете по id, но вы можете применить .after() к объекту jQuery, содержащему много элементов для добавления (клонированного) содержимого после нескольких элементов:

$('div.someclass').after( $('<p/>').text('whatever') );

В этом случае, на мой взгляд, определенно имеет смысл сохранить контекст цепочки как оригинальный объект jQuery.

Метод .insertAfter() может быть ближе к тому, что вы хотите:

$('<p/>').insertAfter('#hello1').text('World');

(Он также возвращает объект jQuery, к которому он был применен, но вставляет его в "reverse".)

Вы можете написать свой собственный метод плагина, чтобы вернуть добавляемый элемент, но это будет запутать, поскольку оно будет работать против всех стандартных методов.

Ответ 2

Вот как это делается для большинства методов jQuery. Лучше для jQuery быть последовательным и возвращать исходный объект.

Исправление:

$('#hello1').after(
    $('<p/>', { text: 'World!' })
);

или

$('#hello1').after(
    $('<p/>').text('World!')
);

или даже:

$('<p/>').text('World!').insertAfter('#hello1');

Последний может быть действительно предпочтительным, поскольку он затем продолжает цепочку из нового элемента <p>.

Ответ 3

Он не предоставляет вам созданный элемент, потому что вы не всегда создаете элемент, для JQuery потребуется значительная вычислительная мощность, чтобы обнаружить, что элемент создан, и имеет смысл иметь больше смысла он возвращает элемент, который был объектом операции.