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

我试图找出如何使用jQuery尽可能合理地构造HTML。据我所知，这应该会产生

Alice

，但会产生

[object object]

：

post=$（“”）；
用户名=$（“”）.html（“Alice”）；
post.append（用户名）；

我发现用

post.append（username.html（））

替换最后一行可以让我更接近我的目标，但是如果我这样做的话，它会忽略

标记。如何插入带有周围标记的子元素，而不写出

“+username+”

，这似乎是一种新手完成任务的方法

---

编辑：愚蠢的错误。我上面发布的代码片段过于简化；我真的想在我的代码中做

post.append（用户名+另一个元素）

。显然，我不能像那样附加对象。我已将其更改为

post.append（用户名）；post.append（另一个_span_元素）现在它可以正常工作了。杜尔
 对我有效：
$（“”）。追加（$（“”）html（“Alice”）[0]。outerHTML==“Alice”
是否有不这样做的原因：

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

$（'Alice'）。附加到（'body'）；

或

var username=“Alice”；
$（''）。附于（'正文'）；
$（用户名）.appendTo（“#user”）；

或

var username=“Alice”；
$（''）。附于（'正文'）；
$（'#user'）.html（用户名）；

或

var username=“Alice”；
$（''）。附于（'正文'）；
$（'#user'）。文本（用户名）；

或者其他200个选项中的任何一个？
您的目标是通过以下方法实现的：

post=$（“”）；
用户名=$（“”）。文本（“Alice”）；
post.append（用户名）；

.
outerHTML仅在无需定制的情况下工作support@Marshall我用它来证明元素的内容是什么；我不是建议将
outerHTML
用于任何事情。你说得对，它确实有效。。。我的问题是，我试图在代码中连接两个
对象，然后同时附加它们。我可能不该认为那会起作用！如果您使用的是innerHTML（这或多或少是html方法所做的），一种“合理”的方法是构造整个html片段并一次性插入。这样，解析器只需调用一次，就可以使用一个完整的片段。以位调用它只会产生额外的开销。主要是因为直接将HTML编写为字符串对我来说似乎并不“正确”。我更喜欢使用对象，然后在最后构建整个页面。也许这是一个愚蠢的原因，但这是我习惯于编写代码的方式。
$('<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);

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