jquery - 防止 jQuery .html() 删除自结束标记斜杠

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。因此，所有 <input> 结束标记斜杠都将被删除。当我将渲染的代码复制并粘贴到我的 CMS 中时，它不允许我发布它。

有人有一个聪明的方法来阻止 .html() 删除“斜杠”吗？或者至少将斜线放回去而无需手动操作？

Answer 1

如果我读 the documentation我看到以下文字:

This method uses the browser's innerHTML property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

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

您可以使用 Tidy 将其转换为有效的 xhtml。谷歌搜索让我认为 this tool或许可以帮到你。