javascript - 媒体嵌入数据显示为字符串而不是 HTML

Question

好的，所以我构建了一个小应用程序，其中包含一些媒体嵌入数据(如 youtube 视频)，以字符串的形式出现，如下所示:
"<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen></iframe>"
我不记得这叫什么了，这就是为什么我很难用谷歌搜索答案。无论如何，我使用了innerHTML尝试添加此 iframe到页面。它本身不起作用，所以我正在使用这行丑陋的代码来替换所有 <一种东西:
element.innerHTML = embedData.replace("&lt;", "<").replace("&lt;", "<").replace("&gt;", ">").replace("&gt;", ">");
我知道这很丑陋，而且可能性能非常差，所以我正在寻找更好/“更正确”的解决方案。

这是一个非常简化的 fiddle :
https://jsfiddle.net/cvco8c23/

Answer 1

这是一种方法。

var a = document.getElementById('test');

a.innerHTML = '<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen></iframe>';

var v = a.childNodes[0].nodeValue;

var b = document.getElementById('test2');

b.innerHTML = v

这一切都在 DOM 中完成，但要在幕后使用:

var a = document.createElement('div');

这将取消转义文档中的文本(即准备将其呈现给用户)，然后将其返回未转义。

JSFiddle