当 iframe 存在时，本机 javascript 等效于 jquery.append答案

【问题标题】：native javascript equivalent to jquery.append when iframes are present当 iframe 存在时，本机 javascript 等效于 jquery.append
【发布时间】：2014-09-04 20:51:08
【问题描述】：

我正在尝试使用本机 javascript 将一串 html 附加到目标 div。这很好用：

var selector = document.getElementById('divid');
var str = '<div><h1>string of html content</h1></div>';
selector.innterHTML += str;

除非文档包含 iframe，否则在附加 innerhtml 时似乎会隐藏该框架。我尝试了以下解决方法：

var selector = document.getElementById('divid');
var str = '<div><h1>string of html content</h1></div>';
var div = document.createElement('div');
div.innerHTML = str;
selector.appendChild(div);

这可行，但现在我正在创建一个不必要的 div 容器，有没有办法在不创建不会删除 iframe 的新元素的情况下做到这一点？

【问题讨论】：

我给你看了我的d，它的str

标签： javascript

【解决方案1】：

除非文档包含 iframe，否则在附加 innerhtml 时似乎会隐藏该框架

请参阅 "innerHTML += ..." vs "appendChild(txtNode)" 了解原因 - 修改 innerHTML 会创建一个重新加载的新 iframe。也可以看看What is better, appending new elements via DOM functions, or appending strings with HTML tags?

这可行，但现在我正在创建一个不必要的 div 容器

只是不要创建额外的div，反正你的 HTML 中有一个：

var selector = document.getElementById('divid');
var div = selector.appendChild(document.createElement('div'));
div.innerHTML = '<h1>string of html content</h1>';

有没有办法在不创建不会删除 iframe 的新元素的情况下做到这一点？

您也可以使用native insertAdjacentHTML method，它相当于带有 HTML 字符串的 jQuery 的 append：

var selector = document.getElementById('divid');
selector.insertAdjacentHTML('beforeend', '<div><h1>string of html content</h1></div>');

【讨论】：

似乎有效，之前从未使用过 insertAdjacentHTML。谢谢！

【解决方案2】：

这似乎行得通。

var parser = new DOMParser();
var el = parser.parseFromString(str, "text/html");
selector.appendChild(el.childNodes[0]);

【讨论】：