Diferencia entre usar .html() y .contents()

¿Cuál es la diferencia entre usar estos dos fragmentos de jQuery?Diferencia entre usar .html() y .contents()

.append($(this).contents()); 
// and 
.append($(this).html());

Fuente

2012-02-10 Brandon Lebedev

+10

¿Has leído los documentos? – mkoryak

http://api.jquery.com/contents/ – kobe

Parece que todos ignoran la parte '.append()' de la pregunta. –

.contents() devuelve los elementos, moviéndolos así. http://api.jquery.com/contents/

.html() devuelve una cadena, copiando así los elementos. http://api.jquery.com/html/

Fuente

2012-02-10 17:03:09

+1 para siendo el primero en vincularse con los documentos :) – AlienWebguy

32bitkid tiene razón. La parte '.append()' de la pregunta sí importa. Más específicamente, para '.contents()' moverá efectivamente esos elementos, para '.html()' copiará esos elementos. –

@TimothyAaron Supongo que copiar el HTML de los elementos es lo mismo que una copia superficial, no una copia profunda (lo que llevaría a los manejadores de eventos y demás). Por lo tanto, si se desea copiar los manejadores, se debe usar '.contents(). Clone()'. – Blazemonger

sí, son completamente diferentes

.contents() le da un objeto jQuery que contiene toda la niño DOM nodos del elemento.
.html() que da una cadena de HTML representan a partir de los nodos descendientes del elemento.

Así que cuando .append() la contents(), estás reubicación de los nodos a una nueva ubicación.

Cuando .append() , está generando nuevos nodos desde la cadena HTML.

Tenga en cuenta que en el lado del cliente, no hay HTML. Solo tienes el DOM.

Teniendo en cuenta que ...

... cuando haces .html(), lo que sucede es que todos los nodos descendientes DOM están siendo analizados, y una cadena HTML se está creando y devueltos.
... cuando haces .html('<b>some HTML content</b>'), la cadena HTML en sí no se añade a la DOM, sino más bien la cadena es analizado sintácticamente , y se generan nuevos nodos DOM, que se añaden a continuación a la DOM.

Sobre la base de un comentario sobre de corte y copia, suena como si usted todavía piensa que está trabajando con la cadena original HTML enviado desde el servidor.

Usted no es.

se trabaja con objetos JavaScript (bueno, objetos host) que están anidados uno dentro de otro para formar una jerarquía de objetos (padres, hijos, nietos, etc.). Puede reubicar una sección de esa jerarquía a otra ubicación dentro de la jerarquía.

Esta jerarquía de elementos se denomina DOM, o Document Object Model.

Desafortunadamente, dado que jQuery's .append() acepta una cadena HTML, se agrega a la ilusión de que en realidad se trata de marcas HTML en lugar de objetos.

Así que voy a decirlo de nuevo ...

.html()genera una nueva cadena HTML. Cuando le dé la cadena al .append(), creará nuevos nodos basados en esa cadena, e insertarlos.
.contents() simplemente selecciona los nodos existentes, y los insertos. Como un nodo no puede estar en dos ubicaciones al mismo tiempo, los nodos se reubican en la ubicación en el DOM donde están siendo anexados.

Fuente

2012-02-10 17:03:32

+1 para responder lo que '.append()' hará cuando se trata de una cadena frente a una colección de nodos. –

Entonces, (en teoría), ¿'.contents()' usa menos procesamiento? –

@BrandonLebedev: Esas preguntas siempre son relativas a la implementación, pero para hacer una declaración amplia, yo diría * sí *. Recuerde que en el lado del cliente, no tiene * ningún * HTML para trabajar. Entonces cuando haces '.html()' analiza el DOM, y * crea * la cadena de HTML. Cuando hace '.html ('un poco de contenido HTML')', analiza la cadena y genera nuevos nodos DOM. –

Diferencia entre usar .html() y .contents()

Respuesta

Cuestiones relacionadas