La mejor manera de agregar elementos DOM con jQuery

Question

Así que he visto tres maneras 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 - Tradicional JavaScript

Creo que la manera JS recta de hacerlo es mediante la construcción de cada elemento, el establecimiento de atributos, y luego añadiendo ellos. 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 - Al añadir 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 por lo general sólo añadir una cadena de HTML.
Ejemplo:

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

3 - .clone de jQuery()

También he visto una gran cantidad de usos y referencias a .clone() en jQuery.
Ejemplo:

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

me encantaría escuchar lo que otros tienen que decir acerca de esto.

(Además, esto parece ser un buen candidato para una 'comunidad wiki', pero no estoy muy familiarizado con ellos. Alguien comentario y quiero saber si debe ser? Gracias)

Answer 1

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 2

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

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

Answer 3

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 4

Si ya tiene un elemento de plantilla que desea copiar a continuación, por todos los medios utilizar clone().

Pero si desea crear un elemento de cero entonces hay básicamente dos métodos que creo que aludía a:

1. Crear elementos DOM como objetos (usando createElement por ejemplo).
2. Crear elementos DOM como HTML (utilizando 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 usted, le recomiendo que lo haga.

De lo contrario beneficios del uso de este último es que es más limpia si el elemento tiene muchos niños.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 cuanto 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.

Answer 5

Si está trabajando con grandes cantidades de HTML que desea volver a utilizar, le sugiero que mire: 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 más pequeñas de html qué sp. Said es la mejor manera

Answer 6

Clon contenido existente ...

var $html = $template.clone();

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

Debido contenido clon es con propiedades 'DOM'. A continuación, puede cambiar estas etiquetas, propiedades, valor y añádalo ...