.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);
});

Ответы

Ответ 1

См.:

.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() в исполнении.

Ответ 2

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

jQuery infographic

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

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

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

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

jQuery insertion infographic, plus flipped versions of the functions

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

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>'))

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

Ответ 3

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

Ответ 4

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

.append() vs .after()

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

.prepend() vs .before()

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

Итак, append и prepend ссылаются на дочерний объект, тогда как после и до этого относится к родному брату объекта.

Ответ 5

Существует основное различие между .append() и .after() и .prepend() и .before().

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

В обратном случае для .prepend() и .before().

Fiddle

Ответ 6

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

Ответ 7

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

    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

Ответ 8

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

append() добавляет новый node к child node, который вы его вызывали.

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

creates a child node <p> to <div>

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

Ответ 9

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

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

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

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