jquery .html () vs .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 pasa 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 nueva colección DOM.

Tenga en cuenta que en realidad es mucho más complicado que eso, ya que jQuery hace un montón 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 controles que realiza jQuery, eche un vistazo aquí , aquí y aquí .

innerHTMLgeneralmente es el enfoque más rápido, aunque no dejes que eso gobierne lo que haces todo el tiempo. El enfoque de jQuery no es tan simple como element.innerHTML = ...: como mencioné, hay muchas 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.

Esta:

$('<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 otro objeto jQuery primero. El segundo crea un contenedor jQuery adicional para el segundo div, luego lo agrega al primero.

Un jQuery Wrapper (por ejemplo):

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

Dos envoltorios jQuery (por ejemplo):

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

Tienes algunos casos de uso diferentes. Si desea reemplazar el contenido, .htmles una gran llamada ya que es el equivalente de innerHTML = "...". Sin embargo, si solo desea agregar contenido, el $()conjunto de envoltorio adicional no es necesario.

Solo use dos envoltorios si necesita manipular los agregados divmás adelante. Incluso en ese caso, es posible que solo necesite usar uno:

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

si .addquiere decir .append, entonces el resultado es el mismo si #myDivestá vacío.

¿Es el rendimiento el mismo? No lo se.

.html(x) termina haciendo lo mismo que .empty().append(x)

Bueno, .html()utiliza el .innerHTMLque es más rápido que la creación de DOM .

Puede obtener el segundo método para lograr el mismo efecto:

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

Luca mencionó que html()solo inserta el HTML que resulta en un rendimiento más rápido.

Sin embargo, en algunas ocasiones, optaría por la segunda opción, considere:

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

.html() reemplazará todo.

.append() solo se agregará al final.

Aparte de las respuestas dadas, en el caso de que tenga algo como esto:

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

lo que significa que desea agregar automáticamente una carga de archivo más si se cargaron archivos, el código mencionado no funcionará, porque después de cargar el archivo, se volverá a crear el primer elemento de carga de archivos y, por lo tanto, el archivo cargado se borrará de él . Debería usar .append () en su lugar:

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

Esto me ha pasado . Versión de jquery: 3.3. Si está recorriendo una lista de objetos y desea agregar cada objeto como elemento secundario de algún elemento dom primario, entonces .html y .append se comportarán de manera muy diferente. .htmlterminará agregando solo el último objeto al elemento primario, mientras .appendque agregará todos los objetos de la lista como elementos secundarios del elemento primario.