Я довольно хорошо разбираюсь в кодировании, но время от времени я натыкаюсь на код, который, кажется, делает практически одно и то же. Мой главный вопрос заключается в том, почему вы используете .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()
помещает данные внутрь элемента по последнему индексу
и
.prepend()
помещает элемент-предшественник по первому индексу
.
<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>
Это изображение отображается приведенное ниже, дает четкое понимание и показывает точное различие между .функции append()
, .добавить()
, .после()
и .до()
Вы можете видеть из изображения, что.функции append()и
.добавить () - добавляет новые элементы, как ребенка элементы (коричневого цвета) к цели.
И .после()
и `.до () - добавляет новые элементы, как брат элементы (черного цвета) к цели.
Вот [демо][2] для лучшего понимания.
<ч>
Редактировать: перевернутый версии этих функций:
Используя [настоящего Кодекса](
):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()
vs .after()
append()
: Вставляет содержимое, указанное параметром, в конец каждого элемента в наборе найденных элементов.after()
: Вставляет содержимое, указанное параметром, после каждого элемента в наборе найденных элементов. .prepend()
vs .before()
prepend()
: Вставляет содержимое, указанное параметром, в начало каждого элемента в наборе совпадающих элементов.before()
: Вставляет содержимое, указанное параметром, перед каждым элементом в наборе найденных элементов.Таким образом, append и prepend относятся к дочерним элементам объекта, в то время как after и before относятся к братьям и сестрам объекта.
Есть принципиальная разница между .функции append()
и .после()
и .добавить()
и .до()
.
.функции append () - добавляет элемент параметр *внутренний селектор элемента's метка в самом конце* а
.после () - добавляет элемент параметра после элемента'ы тег.
Наооборот это для.добавить()и
.до()`.
[Скрипка][1]
Нет никаких дополнительных преимуществ для каждого из них. Это полностью зависит от вашего сценария. Ниже код показывает их различие.
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>
Представьте дом (HTML-страницу) Как правильно дерево. HTML-элементов являются узлы этого дерева.
На `Добавить () - добавляет новый узел к "ребенок" узла вы назвали его.
Example:$("#mydiv").append("<p>Hello there</p>")
creates a child node <p> to <div>
После () - добавляет новый узел на том же уровне, или на том же уровне или ребенка к родителю узла вы назвали его.
Когда вы не манипулировать DOM с помощью jQuery методов зависят от результата, который вы хотите и часто используется для замены содержимого.
При замене контента, который вы хотите .удалить()
содержание и замените его новым содержанием. Если вы .удалить()
существующий тег, а затем попытаться использовать .функции append ()
, он выиграл't работа потому что сам тег был удален, если вы используете .после (), новый контент добавляется 'вне' тег (сейчас убрали) и это'т зависит от предыдущих
.удалить()`.