jQuery .html() frente a .append()
Digamos que tengo un div vacío:
<div id='myDiv'></div>
Es esto:
$('#myDiv').html("<div id='mySecondDiv'></div>");
Lo mismo que:
var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);
Cada vez que pasas una cadena de HTML a cualquiera de los métodos de jQuery, esto es lo que sucede:
Se crea un elemento temporal, llamémoslo x. x innerHTMLse establece en la cadena de HTML que ha pasado. Luego, jQuery transferirá cada uno de los nodos producidos (es decir, x childNodes) a un fragmento de documento recién creado, que luego almacenará en caché para la próxima vez. Luego devolverá los fragmentos childNodescomo una colección DOM nueva.
Tenga en cuenta que en realidad es mucho más complicado que eso, ya que jQuery realiza una serie de comprobaciones entre navegadores y varias otras optimizaciones. Por ejemplo, si pasa solo <div></div>a jQuery(), jQuery tomará un atajo y simplemente lo hará document.createElement('div').
EDITAR : Para ver la gran cantidad de comprobaciones que realiza jQuery, eche un vistazo aquí , aquí y aquí .
innerHTMLGeneralmente es el enfoque más rápido, aunque no dejes que eso controle lo que haces todo el tiempo. El enfoque de jQuery no es tan simple como element.innerHTML = ...: como mencioné, se están realizando un montón de comprobaciones y optimizaciones.
La técnica correcta depende en gran medida de la situación. Si desea crear una gran cantidad de elementos idénticos, lo último que desea hacer es crear un bucle masivo, creando un nuevo objeto jQuery en cada iteración. Por ejemplo, la forma más rápida de crear 100 divs con jQuery:
jQuery(Array(101).join('<div></div>'));
También hay cuestiones de legibilidad y mantenimiento a tener en cuenta.
Este:
$('<div id="' + someID + '" class="foobar">' + content + '</div>');
... es mucho más difícil de mantener que esto:
$('<div/>', {
id: someID,
className: 'foobar',
html: content
});
Ellos no son los mismos. El primero reemplaza el HTML sin crear primero otro objeto jQuery. El segundo crea un contenedor jQuery adicional para el segundo div y luego lo agrega al primero.
Un jQuery Wrapper (por ejemplo):
$("#myDiv").html('<div id="mySecondDiv"></div>');
$("#myDiv").append('<div id="mySecondDiv"></div>');
Dos jQuery Wrappers (por ejemplo):
var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);
var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);
Tiene algunos casos de uso diferentes. Si desea reemplazar el contenido, .htmles una excelente opción ya que es el equivalente a innerHTML = "...". Sin embargo, si solo desea agregar contenido, el $()conjunto de contenedores adicional no es necesario.
Utilice solo dos envoltorios si necesita manipular el agregado divmás adelante. Incluso en ese caso, es posible que solo necesites usar uno:
var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();
