javascript - jQuery append duplicating elements -

i have following javascript:

jquery.fn.outerhtml = function(s) {     return s         ? this.before(s).remove()         : jquery("<p>").append(this.eq(0).clone()).html(); };  $(function() {     var parentcontainer = $("<ul><ul>");     var textcontainer =  $("<li></li>");     var textinput = $("<textarea rows=10 cols=10></textarea>");     textcontainer.append(textinput);     parentcontainer.append(textcontainer);      alert(parentcontainer.outerhtml()); }); 

the alert display following code:

<ul><ul></ul><li><textarea rows="10" cols="10"></textarea></li></ul> 

from understand nesting li element first ul element includes copy of first wrapper <ul></ul>.

does understand why happen?

that's because of $("<ul><ul>"), creating 2 ul elements. change to:

var parentcontainer = $("<ul></ul>"); 

or:

var parentcontainer = $("<ul/>");