来自 JSON 的字符串被写入为文本而不是 DOM 元素

string from json is being written as text and not as dom elements

本文关键字：文本 元素 DOM JSON 字符串 来自      更新时间：2023-09-26
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 作为一个不带引号的字符串，所以它就像一个简单的元素。

数据来自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

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

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

请注意开头的&lt;。

为了将其用作 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 攻击。

相关文章：