Javascript jQuery beste Weg, um ein großes Stück Code in DOM einfügen

Question

Ich habe ein großes Stück Code, das irgendwann in DOM eingefügt werden muss. Der Code enthält auch einige Variablen:

<ul id="info'+value+'" class="info"><li class="hide"></li><li class="lock"><ul>
// just a piece of the code with variable "value"

Im Moment mache ich das:

var codeToInsert = "<some code/>"
codeToInsert.insertAfter('#someID');

Gibt es aus Sicht der Leistung eine bessere Lösung?

Answer 1

Wenn Sie ein großes Stück Code einfügen möchten, verwenden Sie jQuery für seinen Selektor und dann die innerHTML DOM-Eigenschaft - das ist der schnellste Weg, um einen großen Brocken HTML einzufügen. Die Zeichenfolge, die in JQuery eingefügt werden soll, darf nicht umbrochen werden, sondern muss als Zeichenfolge bestehen bleiben.

Z.B.: $('#somePlaceholder')[0].innerHTML = myHTMLString; .

http://www.quirksmode.org/dom/w3c_html.html :

Im Allgemeinen ist innerHTML schneller als normale DOM-Methoden, da der HTML-Parser immer schneller ist als die DOM-Engine. Wenn Sie komplizierte Änderungen vornehmen wollen, sollten Sie innerHTML verwenden. (Bei einfachen Änderungen spielt es keine Rolle, welche Methode Sie verwenden, obwohl innerHTML theoretisch schneller ist).

Wenn Sie eine String-Verkettung in JS durchführen, erstellen Sie ein Array, push() die Teile und join() am Ende, anstatt mit z.B. anzuhängen. += o + . Vor allem im IE macht das einen Unterschied.

Answer 2

Soweit ich weiß, können Sie auch .append(), .appendT(), .before(), .after() usw. verwenden. Hier finden Sie eine Reihe solcher Funktionen: http://api.jquery.com/category/manipulation/