如何从动态创建的复选框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()