javascript - 如何将 JavaScript 附加到包含用单引号引起来的属性定义的页面 html？

Question

我有一些 JS 代码可以动态创建一些 HTML 元素。让我们这样说:

var html = '<a href="#" class="example">Some content</a>';
$(whateverselector).append(html);

如您所见，使用了 jQuery。我正在尝试执行以下操作:我正在生成一些 html 元素，我希望在这个特定元素上添加用单引号引起来的属性。

var someOption = '<a href="#" data-options=\'{"maxWidth": 100, "maxHeight": 100}\'></a>';
$(whateverselector).append(someOption);

发生的情况是，在 jQuery 将元素添加到页面后，单引号在最终 DOM 中被双引号替换。所以它看起来像这样:

<a href="#" data-options="{"maxWidth": 100, "maxHeight": 100}"></a>

问题是另一个(独立的)库正在读取这个值，但它没有用双引号正确地解析它们(作为一个对象)。

如何使此属性在 DOM 中以单引号显示？可能这是 jQuery 中 append 方法的问题。也欢迎 Vanilla JS 解决方案。

Answer 1

What happens is that the single quote is replaced by double quotes in the final DOM after jQuery is adding the element to the page.

您忽略了标记 和作为 DOM 的实时结构之间的区别。

标记(在本例中为 HTML)是元素的文本表示。一旦它被解析并创建了元素，它们就是树(文档)中的对象。属性值上的引号是一个标记的东西；一旦标记被解析，它们就不存在了。

例如，它们具有相同的结果:

$("whatever").append("<a href='#'>...</a>");
$("whatever").append('<a href="#">...</a>');

DOM 中生成的 a 元素完全没有区别。

向您展示 DOM 的浏览器(例如，开发工具中的 Inspect Element)向您展示了 DOM 的表示形式。他们可以根据自己的选择显示属性值；根据我的经验，大多数都用双引号将它们显示出来，但如果他们愿意，也可以使用单引号。它与为创建这些元素而解析的标记(如果有)无关。

The issue is that another (independent) library is reading this values and it is not parsing them correctly (as an object) with the double quotes.

我怀疑您误解了问题所在。但如果你不是，那么有问题的库就坏了。证明:

var someOption = '<a href="#" data-options=\'{"maxWidth": 100, "maxHeight": 100}\'></a>';
$(document.body).append(someOption);
var options = JSON.parse($("a").attr("data-options"));
console.log(options.maxWidth, options.maxHeight); // 100, 100

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>