Question

我正在试图弄清楚如何使用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>"，这似乎是一个新手的任务方法？

编辑：愚蠢的错误。我在上面发布的片段过分简化了;我真的想在我的代码中做post.append(username + another_span_element)。显然我不能追加这样的物体。我已将其更改为post.append(username); post.append(another_span_element);，现在工作正常。杜尔！

Answer 1

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

Answer 2

有没有理由不这样做：

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

Answer 3

使用text()方法完成了您的目标：

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

Example here

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

3 个答案: