3

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

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 上，因此任何复制到所见即所得系统中或在系统中创建的标记都必须在自闭合标记的末尾包含“斜线”。

我的困境是我正在使用Bootstrap Form Builder来创建一些快速而肮脏的表单。此应用程序使用 jQuery .html() 创建呈现的 HTML。所以所有的 < input > 结束标签斜线都被剥离了。当我将渲染的代码复制并粘贴到我的 CMS 中时，它不会让我发布它。

任何人都有一个聪明的方法来防止 .html() 删除“斜线”？或者至少无需手动将斜线放回原处？

4

4 回答 4

1

如果我阅读文档，我会看到以下文本：

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

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

您可以使用 Tidy 将其转换为有效的 xhtml。谷歌搜索让我觉得这个工具可能会帮助你。

于 2013-07-11T07:17:03.337 回答
1

我想到了！好吧，我的同事做到了:)

由于我使用的是将 HTML 呈现到文本区域的表单生成器，因此有几个额外的层。

我不得不使用 .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' />

http://jsfiddle.net/xMsgg/1/

于 2013-07-11T17:35:09.643 回答
0

这不是 jQuery 问题，本机 javascriptinnerHTML方法的工作原理相同。这也不取决于 DOCTYPE。我认为这是浏览器功能。

于 2013-07-11T07:39:12.210 回答
0

实际上，另一种解决方法是替换jQuery.html()为XMLSerializerand its'serializeToString方法。

由于这不使用 DOM 和 innerHTML，而是将您的输入视为“常规”XML，因此所有单个标签都保持完整。

见这里：https ://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer

于 2016-10-25T08:48:46.543 回答