.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);
});
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>
повертеть в руках .до() в исполнении.
это изображение, отображаемое ниже, дает четкое представление и показывает точную разницу между .append()
, .prepend()
, .after()
и .before()
вы можете видеть из изображения, что .append()
и .prepend()
добавляет новые элементы, как ребенок элементов (коричневого цвета) к цели.
и .after()
и .before()
добавляет новые элементы, как брат элементов (черного цвета) к цель.
здесь демо для лучшего понимания.
append()
& prepend()
для вставки содержимого внутри элемента (содержание ее ребенка), а after()
& before()
вставьте содержимое вне элемента (сделав содержимое его родственным).
самый лучший путь идет к документации.
.append()
vs .after()
- .
append()
вставить содержимое, заданное параметром, до конца для каждого элемента в наборе совпавших элементов. - .
after()
вставить содержимое, заданное параметром, после каждого элемента в наборе совпавших элементов.
.prepend()
vs .before()
-
prepend()
вставить содержимое, заданное параметром, в начало для каждого элемента в наборе совпавших элементов. - .
before()
вставить содержимое, заданное параметром, до каждого элемента в наборе совпавших элементов.
таким образом, append и prepend относится к дочернему объекту, тогда как after и before относится к брату объекта.
существует основное различие между .append()
и .after()
и .prepend()
и .before()
.
.append()
добавляет элемент параметр внутри тега элемента селектора в самом конце а .after()
добавляет элемент параметр после тега элемента.
наоборот для .prepend()
и .before()
.
<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>
для каждого из них нет дополнительного преимущества. Это полностью зависит от вашего сценария. Код ниже показывает их разницу.
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
представить дом (HTML-страница) как дерево справа. HTML-элементы являются узлами этого дерева.
на append()
добавляет новый узел к child
узла, на котором вы его вызвали.
Example:$("#mydiv").append("<p>Hello there</p>")
creates a child node <p> to <div>
на after()
добавляет новый узел в качестве брата или на том же уровне или дочернего к родительскому узлу, который вы вызвали.
чтобы попытаться ответить на ваши main вопрос:
почему вы бы использовали .функции append (), а затем .после () или стихов порока?
когда вы манипулируете DOM с jquery, методы, которые вы используете, зависят от результата, который вы хотите, и частое использование-заменить контент.
при замене контента вы хотите .remove()
содержимое и заменить его новым содержанием. Если ты ... --0--> существующий тег, а затем попытаться использовать .append()
это не будет работать, потому что сам тег был удален, а если вы используете .after()
, новое содержимое добавляется " вне " (теперь удалено) тега и не зависит от предыдущего .remove()
.