.append (), prepend (), .after () и .before ()

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

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

Каковы преимущества одного над другим, а также почему я должен использовать один, а не другой? Может кто-нибудь, пожалуйста, объясните мне это?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

Видеть:

.append()помещает данные внутри элемента в last indexи
.prepend()помещает предшествующий элемент вfirst index

предположим:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

когда .append()выполняется, это будет выглядеть так:

$('.a').append($('.c'));

после исполнения:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

Скрипка с .append () в исполнении.

когда .prepend()выполняется, это будет выглядеть так:

$('.a').prepend($('.c'));

после исполнения:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

Скрипка с .prepend () в исполнении.

.after()помещает элемент после элемента
.before()помещает элемент перед элементом

используя после:

$('.a').after($('.c'));

после исполнения:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

Скрипка с .after () в исполнении.

используя раньше:

$('.a').before($('.c'));

после исполнения:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

Скрипка с .before () в исполнении.

Это изображение отображается ниже , дает четкое представление и показывает точное различие между .append(), .prepend(), .after()и.before()

Вы можете видеть на картинке , что .append()и .prepend()добавляют новые элементы в качестве дочерних элементов (коричневого цвета) к цели.

И .after()и .before()добавляет новые элементы в качестве родственных элементов (черного цвета) к цели.

Вот ДЕМО для лучшего понимания.

РЕДАКТИРОВАТЬ: перевернутые версии этих функций:

Используя этот код :

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

по этой цели:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

Таким образом, хотя эти функции изменяют порядок параметров, каждая создает одно и то же вложение элемента:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

... но они возвращают другой элемент. Это важно для цепочки методов .

append()& prepend()предназначены для вставки содержимого внутри элемента (делая его дочерним), а after()& для before()вставки содержимого вне элемента (делая его родным).

Лучший способ - документирование.

.append() против .after()

• , append(): Вставить содержимое, указанное параметром, в конец каждого элемента в наборе соответствующих элементов.
• , after(): Вставить содержимое, указанное параметром, после каждого элемента в наборе соответствующих элементов.

.prepend() против .before()

• prepend(): Вставить содержимое, указанное параметром, в начало каждого элемента в наборе соответствующих элементов.
• , before(): Вставить содержимое, указанное параметром, перед каждым элементом в наборе соответствующих элементов.

Таким образом, append и prepend относится к дочернему элементу объекта, тогда как after и before относится к родному элементу объекта.

Существует принципиальная разница между .append()и .after()и .prepend()и .before().

.append()добавляет элемент параметра внутри тега элемента селектора в самом конце, тогда как .after()добавляет элемент параметра после тега элемента .

Наоборот для .prepend()и .before().

скрипка

Для каждого из них нет никаких дополнительных преимуществ. Это полностью зависит от вашего сценария. Код ниже показывает их разницу.

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    

Представьте DOM (HTML-страницу) как правильное дерево. Элементы HTML являются узлами этого дерева.

append()Добавляет новый узел к childузлу вы назвали его.

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

after()Добавляет новый узел в качестве родного брата или на том же уровне или ребенка к родителю узла, называется его.

Чтобы попытаться ответить на ваш главный вопрос:

почему вы используете .append (), а не .after () или наоборот?

Когда вы манипулируете DOM с помощью jquery, используемые вами методы зависят от желаемого результата, и частое использование заключается в замене контента.

При замене контента вы хотите .remove()контент и замените его новым контентом. Если вы .remove()используете существующий тег, а затем пытаетесь использовать .append()его, он не будет работать, поскольку сам тег был удален, тогда как при использовании .after()новый контент добавляется «вне» (теперь удаленного) тега и не зависит от предыдущего .remove(),