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

Insert a whole element into another element, not just its inner HTML

本文关键字：元素 不仅仅是 内部 HTML 另一个 插入      更新时间：2023-09-26

我试图找出如何使用jQuery构建HTML尽可能理智。据我所知，这应该产生<div><span>Alice</span></div>，但却产生<div>[object Object]</div>:

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

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

EDIT:愚蠢的错误。我上面发布的片段过于简化了;我真的想在我的代码中做post.append(username + another_span_element)。显然，我不能像这样附加对象。我把它改成了post.append(username); post.append(another_span_element);，现在它工作得很好。·杜尔!

适合我:$("<div>").append($("<span>").html("Alice"))[0].outerHTML == "<div><span>Alice</span></div>"

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

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

例子。

有不做的理由吗? 

$('<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个选项中的任何一个?

相关文章：