将整个元素插入另一个元素，而不仅仅是其内部 HTML

Question

我试图弄清楚如何使用 jQuery 尽可能合理地构建 HTML。据我所知，这应该产生

Alice

，但会产生

[object Object]

：

post = $("<div>");
username = $("<span>").html("Alice");
post.append(username);

我发现用 post.append(username.html()) 替换最后一行可以让我更接近我的目标，但它如果我这样做的话，就会省略 标签。如何插入带有周围标签的子元素，而不写出 "" + username + ""，这似乎是完成该任务的新手方法？

编辑：愚蠢的错误。我上面发布的代码片段过于简化；我真的很想在我的代码中执行 post.append(username + another_span_element) 。显然我不能像这样附加对象。我已将其更改为 post.append(username); post.append(another_span_element); 现在它工作正常。杜尔！

Answer 1

对我有用： $("

").append($("").html("Alice"))[0].outerHTML == "

< span>爱丽丝

"

Answer 2

您的目标是通过 text() 方法完成：

post = $("<div>");
username = $("<span>").text("Alice");
post.append(username);

此处示例。

Answer 3

是否有理由不执行：

$('<div><span>Alice</span></div>').appendTo('body');

或

var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$(username).appendTo('#user');

或

var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').html(username);

或

var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').text(username);

或其他 200 个选项中的任何一个？