Question

我相信大多数人都知道以下内容：

var str = '<img src="path/to/some/image" />'

$('#selector').html(str);

这将输出以下HTML：

<div id="selector">
  <img src="path/to/some/image">
</div>

它删除了img标记末尾的自关闭“斜杠”，因为jQuery呈现真正的HTML，而不是XHTML。

我的双手使用的是验证XHTML的CMS，因此复制到系统WYSIWYG中或在系统中创建的任何标记都必须在自闭标记的末尾包含“斜杠”。

我的困境是我正在使用Bootstrap Form Builder创建一些快速而肮脏的表单。此应用程序使用jQuery .html（）来创建呈现的HTML。所有＆lt;输入＆gt;正在剥离关闭标记斜杠。当我将渲染的代码复制并粘贴到我的CMS中时，它不会让我发布它。

任何人都有一种聪明的方法来阻止.html（）删除“斜杠”？或者至少将斜杠放回去而不必手动操作？

Answer 1

如果我阅读the documentation，我会看到以下文字：

此方法使用浏览器的innerHTML属性。有些浏览器可能不生成完全复制所提供的HTML源的DOM。例如，版本8之前的Internet Explorer将转换所有链接到绝对URL和Internet Explorer先前的href属性没有版本9将无法正确处理HTML5元素添加单独的兼容层。

这让我相信这是您使用的浏览器的问题，而不是jQuery的问题。

您可以使用Tidy将其转换为有效的xhtml。谷歌搜索让我觉得this tool可以帮助你。

Answer 2

我明白了！好吧，我的同事做了:)。

由于我正在使用将HTML呈现为textarea的表单生成器，因此还有一些额外的层。

我必须使用.text（）和.html（）的组合。而不是解释它，这里是一个代码片段和jsfiddle链接，它展示了正在发生的非常简化的版本：

$('#html').html("<input type='text' />");
var str = $('#html').html();
$("#renderHTML").html(str);

这将输出<input type='text'>

$('#text').text("<input type='text' />");
var str1 = $('#text').text();
$("#renderTEXTHTML").html(str1);

这个将输出这将输出<input type='text' />

Answer 3

这不是jQuery问题，原生javascript innerHTML方法的工作方式相同。这也不是取决于DOCTYPE。我认为这是浏览器功能。

Answer 4

实际上，另一种解决方法是将JOIN替换为jQuery.html()及其＆＃39; XMLSerializer方法。

由于这不使用DOM和innerHTML，而是将输入视为＆＃34;常规＆＃34; XML，所有单个标签都保持完整。