Question

document.getElementById("id").innerHTML = "<div>new div</div>";

写一个新的div元素没问题，但是来自json的字符串：

document.getElementById("id").innerHTML = jsonData.data.children[i].data.media.oembed.html;

总是写成带引号的文字！

 (ie: "<iframe></iframe").

得到以下特性：

<div id="id">
   "<iframe></iframe>"
</div>

而不是

<div id="id">
   <iframe></iframe>
</div>   //as expected

我不明白为什么。我想把这个字符串写成el.innerHTML作为一个没有引号的字符串，所以它就像一个简单的元素。

data from reddit.json

样品：

html: "&lt;iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=http%3A%2F%2Fwww.youtube.com%2Fembed%2FJq9JMm9h9cA%3Ffeature%3Doembed&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJq9JMm9h9cA&amp;image=http%3A%2F%2Fi.ytimg.com%2Fvi%2FJq9JMm9h9cA%2Fhqdefault.jpg&amp;key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=text%2Fhtml&amp;schema=youtube" width="600" height="450" scrolling="no" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;"provider_name: "YouTube"provider_url: "http://www.youtube.com/"thumbnail_height: 360thumbnail_url: "http://i.ytimg.com/vi/Jq9JMm9h9cA/hqdefault.jpg"thumbnail_width: 480title: "Good Doggy"type: "video"url: "http://www.youtube.com/watch?v=Jq9JMm9h9cA"version: "1.0"width: 600__proto__: Objecttype: "youtu.be"__proto__: Object

Answer 1

您正在访问的html属性是XML编码的：

"html": "&lt;iframe class=\"embedly-embed\" src=\"https://cdn.emb......

请注意开头的<。

要将其用作HTML，您需要对其进行解码。一种方法是将其分配到.innerHTML，将其作为文本检索，然后再将其分配给.innerHTML：

var el = document.getElementById("id");
el.innerHTML = jsonData.data.children[i].data.media.oembed.html;
el.innerHTML = el.textContent;    // assign it for a second time

强制性警告：确保您完全信任您在此处使用的内容的来源。如果来源不可靠，这会使您的网站向上开放以进行XSS攻击。

来自json的字符串被写为文本而不是dom元素

1 个答案: