jquery .html () vs .append ()

Digamos que eu tenho uma div vazia:

<div id='myDiv'></div>

É isto:

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

O mesmo que:

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

Sempre que você passa uma string de HTML para qualquer método do jQuery, é o que acontece:

Um elemento temporário é criado, vamos chamá-lo de x. x innerHTMLé definido como a string de HTML que você passou. O jQuery transferirá cada um dos nós produzidos (ou seja, x childNodes) para um fragmento de documento recém-criado, que será armazenado em cache na próxima vez. Ele retornará o fragmento childNodescomo uma nova coleção DOM.

Observe que na verdade é muito mais complicado que isso, pois o jQuery faz várias verificações em vários navegadores e várias outras otimizações. Por exemplo, se você passar apenas <div></div>para jQuery(), o jQuery pegará um atalho e simplesmente o fará document.createElement('div').

EDIT : Para ver a grande quantidade de verificações que o jQuery executa, dê uma olhada aqui , aqui e aqui .

innerHTMLgeralmente é a abordagem mais rápida, embora não deixe que governe o que você faz o tempo todo. A abordagem do jQuery não é tão simples quanto element.innerHTML = ...- como mencionei, existem várias verificações e otimizações.

A técnica correta depende muito da situação. Se você deseja criar um grande número de elementos idênticos, a última coisa que você quer fazer é criar um loop massivo, criando um novo objeto jQuery em cada iteração. Por exemplo, a maneira mais rápida de criar 100 divs com jQuery:

jQuery(Array(101).join('<div></div>'));

Também há questões de legibilidade e manutenção a serem levadas em consideração.

Este:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... é muito mais difícil de manter do que isso:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

Eles não são os mesmos. O primeiro substitui o HTML sem criar outro objeto jQuery primeiro. O segundo cria um wrapper jQuery adicional para a segunda div e depois o anexa à primeira.

Um Wrapper jQuery (por exemplo):

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

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

Dois Wrappers jQuery (por exemplo):

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

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

Você tem alguns casos de uso diferentes em andamento. Se você deseja substituir o conteúdo, .htmlé uma ótima opção, pois é o equivalente a innerHTML = "...". No entanto, se você quiser apenas acrescentar conteúdo, o $()conjunto adicional de wrapper não será necessário.

Use apenas dois invólucros se precisar manipular os itens adicionados divposteriormente. Mesmo nesse caso, você ainda precisará usar apenas um:

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

se .addvocê quer dizer .append, então o resultado é o mesmo se #myDivestiver vazio.

o desempenho é o mesmo? não sei.

.html(x) acaba fazendo a mesma coisa que .empty().append(x)

Bem, .html()usos .innerHTMLmais rápidos que a criação do DOM .

Você pode obter o segundo método para obter o mesmo efeito:

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

Luca mencionou que html()apenas insere o HTML, o que resulta em um desempenho mais rápido.

Em algumas ocasiões, você optaria pela segunda opção, 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() irá substituir tudo.

.append() basta acrescentar no final.

Além das respostas fornecidas, no caso de você ter algo parecido com isto:

<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>

o que significa que você deseja adicionar automaticamente mais um upload de arquivo, se algum arquivo tiver sido carregado, o código mencionado não funcionará, porque após o upload do arquivo, o primeiro elemento de upload do arquivo será recriado e, portanto, o arquivo enviado será apagado dele. . Você deve usar .append ():

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

Isso aconteceu comigo. Versão Jquery: 3.3. Se você estiver percorrendo uma lista de objetos e quiser adicionar cada objeto como filho de algum elemento pai dom, então .html e .append se comportarão muito diferentes. .htmlacabará adicionando apenas o último objeto ao elemento pai, enquanto .appendadicionará todos os objetos da lista como filhos do elemento pai.