jQuery wrapAll no se comporta como se esperaba

Question

que estoy tratando de envolver una serie generada de elementos que se crean sobre la marcha con otro elemento, por ejemplo:

var innerHtmlAsText = "<li>test1</li><li>test2</li>"; 
var wrapper = "<ul />"; 

$("div#target").append($(innerHtmlAsText).wrapAll(wrapper)); 

Mi resultado esperado es

<ul> 
    <li>test1</li> 
    <li>test2</li> 
</ul> 

pero el resultado real es:

<li>test1</li> 
<li>test2</li> 

los li elementos no están envueltos. En mi caso, innerHtml se genera sobre la marcha a partir de una plantilla generada por el usuario y la envoltura se suministra por separado. ¿Cómo puedo envolver los valores internos?

Answer 1

wrapAll devuelve el objeto jQuery original, no el nuevo. Por lo tanto, wrapAll devuelve el <li> s, porque ese es el objeto que se llamó al wrapAll.

Prueba esto:

$("div#target").append($(innerHtmlAsText).wrapAll(wrapper).parent()); 

Answer 2

Eso sucede porque wrapAll no devuelve el envoltorio, pero el objeto original se aplicó a (como la mayoría de las funciones de jQuery).

Uso del .parent() llegar al elemento ul ..

$("div#target").append($(innerHtmlAsText).wrapAll(wrapper).parent()); 

Answer 3

También es posible sólo con .append().

var innerHtmlAsText = "<li>test1</li><li>test2</li>"; 
var wrapper = "<ul/>"; 

$("div#target").append($(wrapper).append(innerHtmlAsText)); 

DEMO