Forum.html()vs. append ()
<div id='myDiv'></div>
é isto:
$('#myDiv').html("<div id='mySecondDiv'></div>");
o mesmo que:
var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);
6 answers
Sempre que passa uma cadeia de HTML a qualquer um dos métodos do jQuery, isto é o que acontece:
Um elemento temporário é criado, vamos chamá-lo x. x innerHTML é definido para a cadeia de HTML que você passou. Em seguida, jQuery irá transferir cada um dos nós produzidos (ou seja, x's childNodes) para um fragmento de documento recém-criado, que então irá cache para a próxima vez. Ele então devolverá o fragmento childNodes como uma nova coleção DOM.
<div></div> a jQuery(), o jQuery irá por um atalho e simplesmente fará document.createElement('div').
EDIT : para ver a quantidade de verificações que o jQuery efectua, veja aqui, Aqui e aqui.
innerHTML é geralmente a aproximação mais rápida, embora não deixe que isso governe o que você faz o tempo todo. abordagem de jQuery não é tão simples quanto element.innerHTML = ... -- Como mencionei, há um monte de verificações e otimizações ocorrendo.
A técnica correcta depende muito da situação. Se você quiser criar um grande número de elementos idênticos, então a última coisa que você quer fazer é criar um loop massivo, criando um novo objeto jQuery em cada iteração. Por exemplo, a forma mais rápida de criar 100 divs com jQuery:
jQuery(Array(101).join('<div></div>'));
Existem também questões de legibilidade e manutenção para tomar em conta.
Isto:
$('<div id="' + someID + '" class="foobar">' + content + '</div>');
... é muito mais difícil de manter do que isto:
$('<div/>', {
id: someID,
className: 'foobar',
html: content
});
um invólucro jQuery (por exemplo):
$("#myDiv").html('<div id="mySecondDiv"></div>');
$("#myDiv").append('<div id="mySecondDiv"></div>');
duas embalagens 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 acontecendo. Se você quiser substituir o conteúdo, .html é uma grande chamada uma vez que é o equivalente a innerHTML = "...". No entanto, se você só quiser adicionar conteúdo, o conjunto de pacotes extra $() é desnecessário.
Utilize apenas duas embalagens se necessitar de manipular o div Adicionado mais tarde. Mesmo nesse caso, você ainda pode precisar usar apenas um:
var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();
Se por {[0] } queres dizer .append, Então o resultado é o mesmo se #myDiv está vazio.
.html(x) acaba fazendo a mesma coisa que .empty().append(x)
Você pode obter o segundo método para atingir o mesmo efeito por:
var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);
O Luca mencionou que html() apenas insere hte HTML o que resulta num desempenho mais rápido.
// 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);
Para além das respostas dadas, no caso de teres algo assim:
<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ê quer adicionar automaticamente mais um envio de Ficheiros se quaisquer ficheiros forem enviados, o código mencionado não irá funcionar, porque depois de o ficheiro ser carregado, o primeiro elemento de envio de Ficheiros será recriado e, como tal, o ficheiro carregado será apagado dele. Devias usar .adicionar () em vez disso:
function changed()
{
if (isAllowed)
{
var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
$('#test').append(tmpHTML);
isAllowed = false;
}
}