IE9，Javascript：创建并附加一个新元素答案

【问题标题】：IE9, Javascript: Create and append a new elementIE9，Javascript：创建并附加一个新元素
【发布时间】：2011-09-14 17:35:40
【问题描述】：

我在让我的代码在 IE9 中运行时遇到了一些严重的问题，在 Chrome 和 Firefox 中运行良好，但我抛出了一些错误。这是我的两个功能：

function insertHTML(content){
    var body=document.getElementsByTagName('body');
    body[0].appendChild(createElement(content));
 }

function createElement(string){
     var container=document.createElement('div');
     container.innerHTML=string;
     var element=container.firstChild.cloneNode(true);
     return element;
 }

我已经为此尝试过严格的方法，但似乎都没有，我会准确解释我需要做什么......

...我需要从一个 html 字符串创建一个新元素，该字符串是从一个 ajax 调用返回的，所以我的脚本在得到它之前几乎不知道它包含什么。

我确实尝试过使用 element.innerHTML 但这并不好，因为如果我在屏幕上有一个 html 元素（表单）并且用户在其中输入数据，然后当插入另一个元素时，它将清除所有用户- 从第一个表单输入的数据。我在做 element.innerHTML+=newData;

所以基本上，我需要两件事：

1) 一种从 html 字符串创建新元素的方法。 2) 一种将元素附加到文档正文的方法。

这一切都需要跨浏览器工作，我不允许使用 jQuery，而且新元素不能包含在 div 父项中，它必须以 body 作为其父项。

非常感谢您的帮助，

理查德

【问题讨论】：

标签： javascript append element internet-explorer-9

【解决方案1】：

所以基本上，我需要两件事：

一种从 html 字符串创建新元素的方法。

一种将元素附加到文档正文的方法。

这一切都需要跨浏览器工作，我不允许使用 jQuery，而且新元素不能包含在 div 父项中，它必须以 body 作为其父项。

以下是在IE8中测试的

<!DOCTYPE html>
<html>
<body>
<script>
var divBefore = document.createElement('div');
var divAfter = document.createElement('div');
var htmlBefore = '<span><span style="font-weight: bold">This bold text</span> was added before</span>';
var htmlAfter = '<span><span style="font-weight: bold">This bold text</span> was added after</span>';

divBefore.innerHTML = htmlBefore;
divAfter.innerHTML = htmlAfter;

document.body.appendChild(divBefore);

setTimeout(function() {
    document.body.appendChild(divAfter);
}, 0);

</script>
<div>This content was here first</div>
</body>
</html>

渲染

This bold text was added before
This content was here first
This bold text was added after

https://www.browserstack.com/screenshots/7e166dc72b636d3dffdd3739a19ff8956e9cea96

在上面的例子中，如果你不需要能够在正文前添加（即在已经存在的内容之前插入内容），那么只需将脚本标签放在原始内容之后，不要使用setTimeout .

<!DOCTYPE html>
<html>
<body>
<div>This content was here first</div>
<script>
var divAfter = document.createElement('div');
var htmlAfter = '<span><span style="font-weight: bold">This bold text</span> was added after</span>';

divAfter.innerHTML = htmlAfter;

document.body.appendChild(divAfter);
</script>
</body>
</html>

【讨论】：

【解决方案2】：

innerHTML 是可读写的，会破坏 div 中的任何内容。小心使用

function insertHTML( htmlString ){
    var bodEle = document.getElementsByTagName('body');
    var divEle = createElement("div");
    divEle.innerHTML = htmlString;
    bodEle.appendChild(divEle);
}

【讨论】：

对不起，这不会这样做，IE9给出的确切错误是：错误：无法获取属性'cloneNode'的值：对象为空或未定义......所以问题出在createElement 函数。
你有一个名为 createElement() 的函数......巧合的是......是一个 JavaScript 函数的名称。尝试更改函数的名称，因为这可能会造成问题
另外...不要在 getElementsById("") 中使用单引号。使用双引号
不，还是不行，问题出在这 1 行： element=container.firstChild.cloneNode(true);无法获取容器div上的克隆节点功能
IE document.body 时的行为与现代浏览器不同。如果您的脚本标记出现在 <head> 中，它将在正文填充之前发生。 cloneNode 对 IE 的支持是未知的，我认为这没有必要。