如何從動態創建的複選框w/jQuery獲取HTML？

Question

我想要獲取要在模板中使用的元素的HTML。

我嘗試使用jQuery來創建元素，然後抓住HTML，但似乎沒有做我認爲它會做的事情。

我能夠從新元素中獲取大部分HTML字符串，但「checked」屬性似乎並未保存。

我可以手動建立HTML，但我寧願有一個庫幫手，以確保我不做任何愚蠢的拼寫錯誤。

這裏就是我試圖做...

http://jsfiddle.net/Kp8e5/28/

Answer 1

.get()和.map()肯定會幫助你..;）

var checkBoxAuto = $("<input />", { 
    id: "idAuto" 
    , type : "checkbox" 
    , class: "answer" 
    , checked : "checked" 
}); 
var checkBoxAutoText = $("<div />") 
    .append(checkBoxAuto) 

var outerHtml = checkBoxAuto.map(function(){ 
     return $(this).parent().html(); 
    }).get(); 

alert(outerHtml); 

demo

Answer 2

好，你想要做的事情非常困難。

按照jQuery的文檔上.html()：

此方法使用瀏覽器的 innerHTML屬性。某些瀏覽器可能不會返回原始文檔中正好可以複製HTML源代碼的HTML 。例如， 如果 它們只包含字母數字 字符，則Internet Explorer有時會將 引用屬性值。

無論你是否會得到你想要的東西，甚至更糟糕的是依靠每個瀏覽器來做同樣的事情，試圖找到一些方法來使用JQuery的附加功能或做你的模板在後端。

Answer 3

然後嘗試將html轉換回字符串，只是將其保留爲DOM元素。

那是什麼克隆的是巨大的：

var checkBoxAuto = $("<input />", { 
    id: "idAuto" 
    , type : "checkbox" 
    , class: "answer" 
    , checked : true 
}); 
var checkBoxAutoDiv = $("<div />").append(checkBoxAuto); 

checkBoxAutoDiv.clone().appendTo('#div1'); 
checkBoxAutoDiv.clone().appendTo('#div2'); 

Answer 4

你可以用outerHTML屬性：

d = document.getElementById("d"); 
d.outerHTML = "<p>This paragraph replaced the original div.</p>"; 

https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML#Browser_compatibility相關的問題：jQuery: outer html()