IE9，Javascript：创建并附加新元素_Javascript_Append_Element_Internet Explorer 9

IE9，Javascript：创建并附加新元素

javascript

IE9，Javascript：创建并附加新元素,javascript,append,element,internet-explorer-9,Javascript,Append,Element,Internet Explorer 9,我在让我的代码在IE9中运行时遇到了一些严重的问题，在Chrome和Firefox中运行良好，但我抛出了一些错误。以下是我的两个功能： function insertHTML(content){ var body=document.getElementsByTagName('body'); body[0].appendChild(createElement(content)); } function createElement(string){ var contai

我在让我的代码在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作为其父项

非常感谢你的帮助

Richard

innerHTML是可读写的，会破坏分区内的任何内容。请小心使用

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

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

从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>

在上面的示例中，如果不需要在正文前添加内容，即在已经存在的内容之前插入内容，那么只需将脚本标记放在原始内容之后，而不使用setTimeout

很抱歉，这样做行不通，IE9给出的确切错误是：错误：无法获取属性“cloneNode”的值：对象为null或未定义。。。所以问题在于createElement函数。您有一个名为createElement的函数，它。。。巧合的是。。。是JavaScript函数的名称。尝试更改函数的名称，因为这可能会产生问题。。。不要在getElementsById中使用单引号。使用双引号否，仍然不工作，问题是这一行：element=container.firstChild.cloneNodetrue；无法在容器divIE上获取克隆节点函数

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

<!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>