javascript - jQuery追加重复元素

Question

我有以下 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());
});

警报将显示以下代码：

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

据我了解，它是将li元素嵌套到第一个ul元素中，但它包含第一个 wrapper 的副本<ul></ul>。

有谁明白为什么会这样？

Answer 1

That's because of $("<ul><ul>"), you are creating 2 ul elements. Change it to:

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

Or:

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