Question

我有一个json对象，其值为html with styles。我尝试使用jquery append将其包含在我的html中。

该值正在追加，但它没有转换为普通DOM，而是将整个事物追加为字符串。

这是我的JSON对象值：

 var obj = {
    content : "<p>&lt;linkrel=&quot;stylesheet&quot;type=&quot;text/css&quot;href=&quot;http:<p>&lt;styletype=&quot;text/css&quot;&gt;<br/>.wrap{<br/>&nbsp;&nbsp;background-color:#F6F6F6;<br/>}<br/>&lt;/style&gt;</p><p>&lt;divclass=&quot;wrap&quot;&gt;<br/>    &lt;/div&gt;</p>"
}

这是我试过的：

HTML：

<div id='container'></div>

JS：

$('#container').append(obj.content);

Demo

输出应该是dom的一部分，而是将整个事物打印为字符串。

Answer 1

你能尝试做什么：

$('#container').append($(obj.content));

那应该有用。因为你只是想附加文本而不是DOM元素

另一个变化是响应JSON，因为它有p个标记和htmlescaped元素。因此，您可能还需要更改响应，例如，

将样式表链接更改为附加到style的{{1}}标记。
以未转义的方式发送回复，这有助于减少混乱。

希望有所帮助！

Answer 2

你可以这样做......

var obj = {
    content : '<p>&lt;style&gt;.wrap{color:red}&lt;/style&gt;&lt;div class="wrap"&gt;aa&lt;/div&gt;</p>'
} 

$('span').append($(document.createElement('div')).html(obj.content).text());

fiddler：https://jsfiddle.net/suscmguy/

您的obj.content似乎有无效/不完整的编码

希望这会有所帮助......

Answer 3

您的字符串格式错误，因为当我用以下代码替换您的代码时，它完全正常

 <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body>
    <div id='tester'></div>
    <script >
        var obj = {
        content : "<ul><li>coffee</li><li>tea</li></ul>'"
        };

        $('#tester').append(obj.content); 
    </script> 
</body>
</html>

我的意思是说你认为你正在添加一个HTML代码，但由于你的字符串格式错误，javascript认为它是一个简单的字符串，这就是为什么你看到一个字符串被添加。

如何从JSON对象解析HTML标记

3 个答案: