如何将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

在jQuery将元素添加到页面之后，单引号被最终DOM中的双引号替换。

你错过了标记和DOM的实时结构之间的区别。

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

例如，这些结果相同：

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

在DOM中生成a元素中没有任何区别。

向您显示DOM的浏览器（例如，开发工具中的Inspect Element）向您显示DOM的表示。 他们可以显示他们选择的属性值; 根据我的经验，大部分用双引号显示它们，但如果他们喜欢，他们可以使用单引号。 它与解析用于创建这些元素的标记（如果有）无关。

问题是另一个（独立的）库正在读取此值，并且它没有使用双引号正确解析它们（作为对象）。

我怀疑你错误地解释了什么是错的。 但如果你不是，那么有问题的图书馆就会被打破。 证明：

 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>

Answer 2

为什么不使用jQuery的.data（）甚至.attr（）函数：

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

Answer 3

你可以这样做：

<body>

    <h1>Title</h1>

    <p class="text"></p>

    <script type="text/javascript">
        $(document).ready(function(){
            var someOption = "<a href=\"#\" data-options=\"{'maxWidth': 100, 'maxHeight': 100}\">Some text</a>";
            $(".text").append(someOption);
        });
    </script>
</body>

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

问题描述

3 个解决方案

解决方案1
4 已采纳 2017-04-13 16:14:01

解决方案2
0 2017-04-13 16:17:25

解决方案3
-1 2017-04-13 16:21:51

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2017-04-13 16:14:01

解决方案2 0 2017-04-13 16:17:25

解决方案3 -1 2017-04-13 16:21:51

解决方案1
4 已采纳 2017-04-13 16:14:01

解决方案2
0 2017-04-13 16:17:25

解决方案3
-1 2017-04-13 16:21:51