Poznámka:Pokud nenávidíte čtení, konečnou odpověď naleznete v souhrnu níže
Možná je opravdu nepotřebujete vytvářet pomocí jQuery.
Pokud je struktura tohoto html komplikovaná (proto použití přístupu document.createElement by bylo přehnané), šel bych s innerHTML atribut.
// somewhere in your code, preferably outside of global scope
var div = document.createElement('div')
div.id = 'mycustomdiv'
document.getElementsByTagName('body')[0].appendChild(div);
// assuming elements contains string of html with your elements
div.innerHTML = elements;
Tímto způsobem se vyhnete (opět za předpokladu) zbytečné režii při vytváření a obalování prvků v objektu jQuery.
Aktualizace:test pro sebe, jaká je nejrychlejší metoda http://jsperf.com/creating-complex-elements. Tento test potvrzuje, že když se snažíte vyždímat každý kousek výkonu, vraťte se k vanilkovému javascriptu a klasickým DOM operacím.
Aktualizace 2. Chcete-li zjistit, proč metoda vnitřní HTML ve Firefoxu 10 mají tak špatné výsledky ve vztahu k předání celého řetězce do jQuery.append, podíval jsem se na zdroj jQuery.
Jak se ukázalo (v jQuery 1.7.1), používají ještě další způsob vytváření prvků dom pomocí document.createDocumentFragment (samozřejmě s některými záložními možnostmi pro prohlížeče, které nemají správnou podporu).
DocumentFragments jsou uzly DOM. Nikdy nejsou součástí hlavního stromu DOM. Obvyklým případem použití je vytvoření fragmentu dokumentu, připojení prvků k fragmentu dokumentu a následné připojení fragmentu dokumentu ke stromu DOM. Ve stromu DOM je fragment dokumentu nahrazen všemi jeho potomky.
Od fragmentu dokumentu je v paměti a není součástí hlavního stromu DOM, připojení potomků k němu nezpůsobí přeformátování stránky .
Za předpokladu, že je k dispozici createDocumentFragment, ukazuje se, že je to nejlepší přístup z hlediska celkového výkonu skriptu napříč prohlížeči.
Takže shrnuto:
stojím opravený. Pokud při vytváření nových prvků DOM hledáte nejlepší výkon v různých prohlížečích, zaměřte se na fragmenty dokumentů (použijte jQuery, pokud nechcete řešit různé rohové případy sami).
Více informací o documentFragment najdete v tomto příspěvku na blogu Johna Resiga http://ejohn.org/blog/dom-documentfragments/
Podrobná analýza 3 běžných způsobů vytváření DOM v JS a nejlepší přístup.
Poskytnu 3 způsoby, jak vytvořit velký DOM a jejich klady a zápory, a samozřejmě nejoptimalizovanější způsob pro vytváření velkých DOM a proč. Sečteno a podtrženo, při vytváření DOM v js jsou nativní metody JS a DOM váš přítel, ne nepoužívejte Jquery, pokud neexistuje jiný způsob (což je nepravděpodobné).
Testovací data pro srovnání: Vytvořeno 400 řádků s 5 sloupci a připojené k DOM.testData je seznam objektů, které získáte z backendu ve formě json k vytvoření tabulky.
Připojený snímek výsledku testu doby provedení pro různé prohlížeče 
HTML
<div id="employeeListContainer1"></div>
<table id="employeeList2">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
<th>ID</th>
<th>Department</th>
</tr>
</thead>
1. způsob:Zřetězení řetězců (Nejoptimalizovanější způsob z hlediska výkonu napříč prohlížeči)
var tableElementContainer1 = document.getElementById("employeeListContainer1"),
temptableHolder = '<table><thead><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>ID</th><th>Department</th></tr></thead><tbody>';
for(var i=0,len=testData.length; i<len; i++){
temptableHolder += '<tr><td>' + testData[i].firstName + '</td><td>' + testData[i].lastName + '</td><td>' + testData[i].title
+ '</td><td>' + testData[i].id + '</td><td>' + testData[i].department + '</td></tr>';
}
temptableHolder += '</tbody></table>';
tableElementContainer1.innerHTML = temptableHolder ;
Výhody:- Nejrychlejší doba spuštění ve Firefoxu/Chrome/IE/Safari (3 až 5 milisekund napříč prohlížeči) . Měřeno prostřednictvím rozhraní API performance.now() a console.time().
Nevýhody:- Když je počet sloupců větší a potřebujete nastavit mnoho atributů, může být práce s řetězci trochu obtížná a méně udržitelná.
2. způsob:Nativní dokument Js document.createElement() (Toto je druhý nejlepší přístup z hlediska výkonu napříč prohlížeči)
var tableBody = document.createElement('tbody'),
tableElement2 = document.getElementById("employeeList2"),
for(var i=0,len=testData.length; i<len; i++){
tableRow = document.createElement("tr");
for(var k in testData[i]){
rowCell = document.createElement("td");
rowCell.appendChild(document.createTextNode(testData[i][k]));
tableRow.appendChild(rowCell);
}
tableBody.appendChild(tableRow);
}
tableElement2.appendChild(tableBody);
Výhody:– 2. nejrychlejší doba spuštění ve Firefoxu/Chrome/Safari (5 až 12 milisekund napříč prohlížeči) . Měřeno prostřednictvím rozhraní API performance.now() a console.time().- Více udržitelných než 1. přístup
Nevýhody:– Doba provádění je delší v prohlížečích IE, 90+ milsec
3. způsob:Použití Jquery k vytvoření DOM (Moje rada je nepoužívejte to)
var tableBody = $('<tbody></tbody>'),
tableElement2 = document.getElementById("employeeList2"),
for(var i=0,len=testData.length; i<len; i++){
tableRow = $("<tr></tr>");
for(var k in testData[i]){
rowCell = $("<td></td>");
rowCell.append(testData[i][k]);
tableRow.append(rowCell);
}
tableBody.append(tableRow);
}
tableElement2.append(tableBody);
Výhody:– Snadné přidávání atributů/tříd/stylů k prvkům a je snadno čitelný a udržitelný.
Nevýhody:– Nejhorší doba provádění ve všech prohlížečích (220 ms až 330 ms) , nejpomalejší čísla jsou v IE
Můžete zkusit načíst statický blok HTML pomocí AJAX místo jeho uložení na stránku samotnou. Umožňuje vám být flexibilnější s tím, jaký typ bloku chcete v budoucnu vložit.
Alternativně (toto je jen náhodný nápad, který není příliš dobře propracovaný), můžete „strukturu“ uložit jako data JSON a poté ji dynamicky analyzovat. Možná něco jako {"div": {"div": {"span": "Text here"}}} pro <div><div><span>Text here</span></div></div> . Přesto bych šel do AJAXu. :)