將整個元素插入到另一個元素中，而不僅僅是它的內部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

回答

相關問題