Question

我在让我的代码在IE9中工作时遇到了一些麻烦，在Chrome＆amp; 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;
 }

我为此尝试过severel方法，似乎没有工作，我会准确解释我需要做什么......

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

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

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

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

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

非常感谢你的帮助，

理查德

Answer 1

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

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

Answer 2

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

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

将元素附加到文档主体的方法。

所有这些都需要跨浏览器工作，并且不允许使用jQuery，而且div父项中不能包含新元素，它必须具有主体作为其父项。

以下内容已在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

在上面的示例中，如果您不需要在正文之前添加内容（即在已存在的内容之前插入内容），则只需将script标签放置在原始内容之后，而不使用{{1 }}。

setTimeout

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

2 个答案: