insertar - jquery move element

jQuery: append() vs appendTo()

Question

Estoy probando los .append() vs .appendTo() jQuery utilizando el siguiente código:

$(''div/>'', {
    id : id,
    text : $(this).text()
    }).appendTo(''div[type|="item"]#''+id);
$(''div[type|="item"]#''+id).append($(this).text());

Tenga en cuenta que los selectores son idénticos en .appendTo() y .append() , pero el último funciona (dentro de la misma página), mientras que el primero no lo hace. ¿Por qué?

¿Cómo consigo que .appendTo() funcione con este tipo de selector (complejo)? ¿Los dos métodos se interpolan de manera diferente? ¿Hay alguna sintaxis que me falta?

No quiero saturar la publicación con código impertinente: basta con decir que existen elementos a los que hacen referencia los selectores, como lo demuestra el método .append() que produce el resultado deseado. Déjame saber si se necesita más información.

¡Gracias!

Answer 1

Ambos métodos realizan la misma tarea. La principal diferencia es

• en la sintaxis, específicamente,
• En la colocación del contenido y destino.

Con .append() , la expresión de selección que precede al método es el contenedor en el que se inserta el contenido.

Con .appendTo() , por otro lado, el contenido precede al método, ya sea como una expresión de selección o como un marcado creado sobre la marcha, y se inserta en el contenedor de destino.

Answer 2

El método .append() inserta el contenido especificado como el último elemento secundario de cada elemento en la colección jQuery (para insertarlo como el primer elemento secundario , use .prepend() ).

Los .append() y .appendTo() realizan la misma tarea. La principal diferencia está en la sintaxis específica, en la ubicación del contenido y el destino. Con .append() , la expresión de selección que precede al método es el contenedor en el que se inserta el contenido. Con .appendTo() , por otro lado, el contenido precede al método, ya sea como una expresión de selección o como un marcado creado sobre la marcha, y se inserta en el contenedor de destino.

Answer 3

Los métodos .append () y .appendTo () realizan la misma tarea y solo se modificará la sintaxis del contenido objetivo y html para insertar. vaya a través de http://api.jquery.com/appendTo/

Answer 4

Me enfrenté a una consulta similar y en la investigación obtuve algunas ideas más. Fue confuso escuchar target, element, etc. y prefiero visualizar el selector externo como $ container y el elemento agregado como $ widget. En inglés llano, quiero agregar el widget al contenedor. Tanto append como appendTo se pueden usar de la siguiente manera y obtendrá exactamente el mismo resultado.

$container = $("#containerdiv");

$widget = $("<div> <h1 id=''title''> widget </h1> </div>")

Enfoque 1: $container.append($widget)

Enfoque 2: $widget.appendTo($container)

La diferencia clave es lo que se devuelve. En el primer caso, se devuelve $ container, y en el segundo caso, se devuelve $ widget. Esto será útil si está encadenando la solicitud con otra declaración jquery. Si desea trabajar con $ container, use la primera construcción y para trabajar con el widget, use la segunda forma. Por ejemplo,

Si desea agregar 2 widgets al contenedor, debe dar

$container.append($widget1).append($widget2)

y si desea agregar un widget y luego el título del widget para decir ''Cool Widget'', le daría

$widget.appendTo($container).find(''#title'').text("Cool Widget")

Answer 5

Para hacer estos dos más fáciles de entender.

Supongamos que tengo ABC tres cartas ordenadas.

Un append C significa MOVE C antes de A, lo que da como resultado la retracción de C pero no A, por lo que tenemos CAB .

Un appendTO C significa MOVE A después de C, esto resulta en la reubicación de A pero no en C, por lo que tenemos BCA .

• Tanto append como ''appendTo'' tienen el mismo resultado de 甲 y 丙, pero todo el orden de las tres cartas cambia.
• Debido a la reubicación de OOO.appendTo (XXX), la XXX debe existir antes de este control.

Answer 6

Para responder a la pregunta, no tiene un elemento para appendTo nada, ya que le faltan caracteres (en su caso, es un corchete de ángulo de apertura < ).

Esta

$(''div/>'',{});

necesita ser

$(''<div/>'',{});

para crear un elemento, de lo contrario, hace exactamente lo que dices que hace: ¡nada!

De lo contrario, parece que tienes el orden de las cosas bien, es así:

• .append() inserta el contenido especificado por el parámetro, al final de cada elemento en el conjunto de elementos coincidentes, como en

  $(Append_To_This).append(The_Content_Given_Here);

• mientras que .appendTo() funciona al revés : inserta cada elemento en el conjunto de elementos emparejados al final del objetivo dado en el parámetro, como en

  $(The_Content_Given_Here).appendTo(Append_To_This);

También hay .prepend() y prependTo() que funciona exactamente igual, con la única diferencia de que los elementos prependidos se agregan al principio del contenido de los elementos de destino en lugar del final.

Answer 7

$(''#someDiv'').append(someStuff); someStuff.appendTo($(''someDiv'')); // el mismo resultado aquí, solo una forma diferente de hacerlo dependiendo de tu sitch

Answer 8

append anexa el parámetro al objeto en el que está trabajando.

appendTo agrega el objeto en el que está trabajando al parámetro.

Más información aquí: http://api.jquery.com/appendTo/

Aparte de eso, hay algo mal aquí:

$(''div/>'',

Esto no es seleccionar nada.

Answer 9

El resultado de retorno es la única diferencia y hace que appendTo sea ​​más práctico para el encadenamiento de métodos:

$("<div>...</div>").appendTo(target).hide();  //hide new-element, not the whole target