javascript - valor - La mejor forma de agregar elementos DOM con jQuery

seleccionar elementos jquery

Question

Así que he visto tres formas de agregar elementos html / DOM a una página. Tengo curiosidad por saber cuáles son los pros y los contras para cada uno de ellos.

1 - JavaScript tradicional

Creo que la forma directa de JS de hacerlo es construyendo cada elemento, estableciendo atributos y luego agregándolos. Ejemplo:

var myRow = document.createElement("tr");
myRow.class = "myClass";
var firstTD = document.createElement("td");
firstTD.innerHTML = "first";
myRow.appendChild(firstTD);
var secondTD = document.createElement("td");
secondTD.innerHTML = "second";
myRow.appendChild(secondTD);
document.getElementById("myContainer").appendChild(myRow);

2 - Adjuntar una cadena de html a través de jQuery

Me he dado cuenta de que la mayoría de los ejemplos de jQuery que veo generalmente solo añaden una cadena de html.
Ejemplo:

$("#myContainer").append(''<tr class="myClass"><td>first</td><td>second</td></tr>'');

3 - jQuery''s .clone ()

También he visto muchos usos y referencias a .clone () en jQuery.
Ejemplo:

$("#myContainer").append($(".myClass").Clone());

Me encantaría escuchar lo que otros tienen que decir sobre esto.

(Además, este parece ser un buen candidato para una ''wiki comunitaria'', pero no estoy muy familiarizado con ellos. ¿Alguien me comentará y me avisará si debería ser así? Gracias)

Answer 1

Clona el contenido existente ...

var $html = $template.clone();

$html.find(''''); ///after change content...

Debido al contenido del clon es con propiedades ''DOM''. Luego puede cambiar estas etiquetas, propiedades, valor y luego añádalo.

Answer 2

La manera más limpia de hacerlo es usando jQuery.

$(''tr'').addClass(''myClass'') como la sintaxis. Esto es fácil de leer, comprender y mantener.

Answer 3

Si está trabajando con grandes cantidades de HTML que desea volver a utilizar, le sugiero que consulte: http://api.jquery.com/jQuery.template/ que es definitivo, pero será reemplazado por algo mejor.

Lo uso en un entorno de producción y es genial, como para piezas pequeñas de html qué sp. dijo que es la mejor manera

Answer 4

Si está utilizando jQuery 1.4, la mejor manera es la siguiente:

$("<a/>", {
id: ''example-link'',
href: ''http://www.example.com/'',
text: ''Example Page''
}).appendTo("body");

Answer 5

Si ya tiene jQuery disponible, úselo. Si no desea alojarlo, use la versión alojada de Google. Al final siempre llama a los métodos javascript createElement o innerHTML nativos de todos modos. Entonces usaría el n. ° 2 y el n. ° 3 si tuviera que clonar específicamente un elemento existente en la página.

Answer 6

Si ya tiene un elemento de plantilla que desea copiar, utilice clone ().

Pero si quieres crear un elemento desde cero, básicamente hay dos métodos que creo que has mencionado:

1. Crea elementos DOM como objetos (usando createElement por ejemplo).
2. Cree elementos DOM como HTML (usando innerHTML o jQuery''s html () por ejemplo).

Primero, si cualquiera de los métodos es más intuitivo o más fácil de escribir para ti, te recomiendo que lo hagas.

De lo contrario, los beneficios de usar este último es que es más limpio si el elemento tiene muchos hijos. Por ejemplo, intente hacer una fila de la tabla con 6 columnas, cada una con una clase diferente usando el primer método. Su código será mucho más largo que si utilizó el segundo método.

En lo que respecta al rendimiento, esta es una buena guía http://andrew.hedges.name/experiments/innerhtml/ pero la respuesta corta es que para la mayoría de los casos las diferencias son bastante insignificantes. Una buena guía para el rendimiento en general también es: http://www.artzstudio.com/2009/04/jquery-performance-rules/ . El sexto consejo tiene que ver con la manipulación DOM.