jQuery wrapAll non comportarsi come previsto

Question

Sto cercando di avvolgere una serie generato di elementi che vengono creati al volo con un altro elemento, ad esempio:

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

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

mio risultato atteso è

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

ma il risultato effettivo è:

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

Gli li elementi non sono avvolti. Nella mia istanza, innerHtml viene generato al volo da un modello generato dall'utente e il wrapper viene fornito separatamente. Come posso ottenere i valori interiori avvolti?

Answer 1

wrapAll restituisce l'oggetto jQuery originale, non quello nuovo. Quindi, wrapAll restituisce il valore <li> s, perché quello è l'oggetto che è stato chiamato wrapAll.

Prova questo:

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

Answer 2

Ciò avviene perché wrapAll non restituisce l'involucro, ma l'oggetto originale è stato applicato a (come maggior parte delle funzioni jquery).

Utilizzare il .parent() per raggiungere l'elemento ul ..

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

Answer 3

E 'anche possibile solo con .append().

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

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

DEMO