Javascript jQuery es la mejor manera de insertar un gran fragmento de código en DOM

Question

Tengo una gran pieza de código que debe insertarse en DOM en algún momento. El código también contiene algunas variables:

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

En este momento estoy haciendo:

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

¿Hay una mejor manera de hacerlo desde el punto de vista del rendimiento?

Answer 1

Si desea insertar una gran porción de código, use jQuery para su selector y luego use la propiedad innerHTML DOM - es la forma más rápida de insertar una gran porción de HTML. No envuelva la cadena que se va a insertar en JQuery, déjela como una cadena.

Por ej .: $('#somePlaceholder')[0].innerHTML = myHTMLString;.

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

En innerHTML en general es más rápido que los métodos DOM normales debido a que el analizador de HTML es siempre más rápido que el motor DOM. Si quiere hacer cambios complicados, use innerHTML. (Para los cambios simples que en realidad no importa el método que use, aunque innerHtml permanece teóricamente más rápido.)

Si lo hace la concatenación de cadenas en JS, crear una matriz, push() las partes y join() al final en lugar de añadir con eg += o +. Hace una diferencia esp. en IE.

Answer 2

parte superior de mi cabeza, también se puede utilizar .Append(), .appendT(), .before(), .after() etc. Compruebe esto para una gama de tales funciones: http://api.jquery.com/category/manipulation/