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

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

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

Fiddle з .after () у виконанні.

використання раніше:

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

після виконання:

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

Fiddle з .before () у виконанні.

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

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

А .after()та .before()додає нові елементи в якості двійників елементів (чорного кольору) до мети.

Ось DEMO для кращого розуміння.

EDIT: перевернуті версії цих функцій:

Використовуючи цей код :

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()і .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().