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

我想弄清楚如何使用jQuery来尽可能健全地构建HTML。据我所知，这应该产生<div><span>Alice</span></div>，而是产生<div>[object Object]</div>：将整个元素插入到另一个元素中，而不仅仅是它的内部HTML

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);，现在它工作正常。杜尔！

来源

2011-09-26 Fraxtil

A“理智”的方法，如果您使用的innerHTML（这或多或少* HTML *方法做什么），是构建整个HTML片段和一次性插入。这样解析器被调用一次，它有一个完全形成的片段可以使用。以位来调用只会产生额外的开销。 – RobG

工作对我来说：$("<div>").append($("<span>").html("Alice"))[0].outerHTML == "<div><span>Alice</span></div>"

来源

2011-09-26 23:33:24

outerHTML只适用于[在某些浏览器]（http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox）没有自定义支持 – Marshall

@Marshall我用它来演示什么元素的含量是;我并不是暗示'outerHTML'可以用于任何事情。 –

你说得对，它的确行得通......我的问题是我试图在我的代码中连接两个''对象，然后一次追加它们。我可能不应该认为这会起作用！ – Fraxtil

是否有不这样做的理由：

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

来源

2011-09-26 23:35:59 adeneo

主要是因为直接将字符串写为字符串对我来说看起来并不“正确”。我更喜欢使用对象，然后在最后构建整个页面。也许这是一个愚蠢的原因，但这是我习惯于编写代码的方式。 – Fraxtil

你的目标是什么对与text()方法进行：

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

Example here。

来源

2011-09-26 23:37:54 Pat

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

回答

相关问题