В таком случае лучше воспользоваться своим.функции append(), и что.appendTo ()?

между этими функциями нет большой разницы, кроме синтаксиса:

$('.target').append('text');
$('text').appendTo('.target');

Как говорится в jQuery docs:

The .append () and .методы appendTo () выполняют ту же задачу. Майор разница в синтаксисе, в частности, в размещении содержание и цель. С.append (), выражение селектора, предшествующее метод-это контейнер, в который вставляется содержимое. С .appendTo (), с другой стороны, содержание предшествует методу, либо как выражение селектора, либо как разметка, созданная на лету, и он вставляется в целевой контейнер.

так что в этом случае лучше использовать .функции append(), и что .appendTo ()? В каких примерах кода подходит только одна из этих двух функций, а другая недостаточно хороша?

тот же вопрос относится к:

8
append jquery prepend

7 ответов

когда вы создаете элемент, он более гладкий в использовании .appendTo эквивалентах

$("<div>", {text: "hello"}).appendTo("body");

vs

$("body").append( $("<div>", {text: "hello" }) /*Awkward having to call jQuery constructor here*/);
2

Я думаю, что есть два основных момента для рассмотрения:

  1. что у вас уже есть ссылки? Если у вас уже есть объект jQuery, содержащий элементы, которые вы хотите добавить, то имеет смысл использовать .appendTo() вместо выбора элементов, которые вы хотите добавить, а затем с помощью .append().

  2. вы хотите / потребность приковать функции? Одна из вещей, которую jQuery делает хорошо, позволяет вам связывать функции вместе, потому что каждый функция возвращает объект jQuery. Очевидно, что если вы хотите вызвать функции для элементов, которые вы добавляете, вы захотите использовать .appendTo() Так что любые функции, которые вы цепляете после этого, будут применяться к добавляемым элементам, а не к добавляемым элементам.

1

в контексте

  • лично я использую две функции в зависимости от того, какой набор инструкций выполняет моя функция или где они используются (контекст), как ты читать код может измениться так, как вы предпочитаете написать код, и он может чувствовать себя лучше в любом случае субъективно на свой собственный.

в любом случае, это довольно буквально, и я нахожу, что пишу каждый автоматически без размышляющий.

в каждом контексте, если предметом является область, которой вы манипулируете,

$(target).append(content)
//within a function based around manipulating a specific area

кажется, имеет больше смысла, тогда как если предметом функции является новое содержимое, то

$(content).appendTo(target);
//appending data to something

больше смысла.

Цепочки Функций

  • также важно отметить, что это имеет больше смысла при цепочке функций в каждом случае. то есть. если вы уже имеете дело с элемент 
$(target).toggle().append(content);

имеет больше смысла, чем добавление другой строки и наоборот.

ресурсы

1

как говорится, в основном append () и appendTo дают те же результаты. Однако, когда вы начинаете цеплять результат, вы можете увидеть разницу!

целевой HTML:

<DIV class=.inner1><SPAN></span><SPAN></span></div>
<DIV class=.inner2><SPAN></span><SPAN></span></div>

сначала с помощью append():

$( ".inner1" )
  .append   ( "<p>Test</p>" )
  .addClass ( "addBorder" );

выдает:

<DIV class="inner1 addBorder"><SPAN></span><SPAN></span>
<P>Test</p>
</div>

второй с appendTo ()

$( "<p>Test</p>" )
.appendTo ( ".inner2" )
.addClass ( "addBorder" );

выдает:

<DIV class="inner2">
    <SPAN></span><SPAN></span>
    <P class="addBorder">Test</p>
</div>
1

это полезно, когда вы связываете несколько действий jQuery вместе. вот так:

$('.target').css({display:"block"}).fadeOut().appendTo('.somewhere');
// appends target to somewhere

или:

$('.target').css({display:"block"}).fadeOut().append('.somewhere');
// appends somewhere to target

эти два разных действия, поэтому полезно иметь их обоих.

0

это в основном дело вкуса.

здесь appendTo удобнее, когда у вас есть ссылка на элемент, а не на объект jQuery, например, в переменной dest:

$("<div/>").appendTo(dest);

использовать append метод вы должны создать объект jQuery для элемента, чтобы иметь возможность вызвать его:

$(dest).append($("<div/>"));
0