.append (), prepend (),.после() и.до()

Я довольно хорошо разбираюсь в кодировании, но время от времени я сталкиваюсь с кодом, который, кажется, делает в основном то же самое. Мой главный вопрос здесь, почему вы используете .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);
});
165
append javascript jquery jquery-after prepend

9 ответов

посмотреть :

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

повертеть в руках .добавить() в исполнении.

, когда .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>

повертеть в руках .добавить() в исполнении.

.after() добавляет элемент после элемента
.before() ставит элемент перед элементом

после:

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

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

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

повертеть в руках .после() в исполнении.

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

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

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

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

повертеть в руках .до() в исполнении.

369

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

jQuery infographic

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

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

здесь демо для лучшего понимания.

113

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

33

самый лучший путь идет к документации.

.append() vs .after()

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

.prepend() vs .before()

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

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

15

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

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

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

Скрипка

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

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

    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
3

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

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

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

creates a child node <p> to <div>

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

2

чтобы попытаться ответить на ваши main вопрос:

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

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

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

2