Question

我正在尝试使用原生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的新元素的情况下执行此操作？

Answer 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，它等同于jQuery的append和HTML字符串：

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

Answer 2

这似乎有效。

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

当iframe存在时，本机javascript相当于jquery.append

2 个答案: