IE9、Javascript：创建和append一个新元素
[英]IE9, Javascript: Create and append a new element
问题描述
I'm having some serious trouble getting my code to work in IE9, works fine in Chrome & Firefox but I throws some errors.
我在让我的代码在 IE9 中运行时遇到了一些严重的问题，在 Chrome 和 Firefox 中运行良好，但我抛出了一些错误。 Here are my 2 functions:这是我的两个功能：
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;
}
I've tried severel methods for this and none seem to work, I'll explain exactly what I need to do...我已经为此尝试了严格的方法，但似乎都没有奏效，我将准确解释我需要做什么......
...I need to create a new element from an html string, the string is sent back from an ajax call so my script will have almost no idea what it contains until it gets it. ...我需要从 html 字符串创建一个新元素，该字符串是从 ajax 调用发回的，所以我的脚本在得到它之前几乎不知道它包含什么。
I did try using element.innerHTML but this is no good, because if i have one html element (form) on the screen and the user enters data into it, and then when another element is inserted it will wipe all the user-entered data from the first form.我确实尝试使用 element.innerHTML 但这并不好，因为如果我在屏幕上有一个 html 元素（表单）并且用户在其中输入数据，然后当插入另一个元素时，它将擦除所有用户输入的数据从第一种形式。 I was doing element.innerHTML+=newData;我在做 element.innerHTML+=newData;
So basically, I need 2 things:所以基本上，我需要两件事：
1) A way to create a new element from an html string. 1) 一种从 html 字符串创建新元素的方法。 2) A way to append the element to the document body. 2) 一种将append 元素转入文档正文的方法。
It all needs to work cross-browser and I'm not allowed to use jQuery, also the new element cannot be contained in a div parent item, it has to have the body as its parent.这一切都需要跨浏览器工作，我不允许使用 jQuery，而且新元素不能包含在 div 父项中，它必须将主体作为其父项。
Thanks very much for your help,非常感谢您的帮助，
Richard理查德
2 个解决方案
解决方案1
0 2020-03-01 12:12:48
So basically, I need 2 things:
- A way to create a new element from an html string.
- A way to append the element to the document body.
It all needs to work cross-browser and I'm not allowed to use jQuery, also the new element cannot be contained in a div parent item, it has to have the body as its parent.
The following was tested in IE8以下是在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>
Renders渲染
This bold text was added before
This content was here first
This bold text was added after
https://www.browserstack.com/screenshots/7e166dc72b636d3dffdd3739a19ff8956e9cea96 https://www.browserstack.com/screenshots/7e166dc72b636d3dffdd3739a19ff8956e9cea96
In the above example, if you don't need to be able to prepend to the body (ie insert content before what already exists), then simply place the script tag after the original content and don't use setTimeout .在上面的示例中，如果您不需要能够在正文前添加内容（即在已经存在的内容之前插入内容），那么只需将 script 标签放在原始内容之后，不要使用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
0 2011-06-14 14:02:52
innerHTML is read write and will destroy anything inside your div. innerHTML 是读写的，会破坏 div 中的任何内容。 use with extreme care小心使用
function insertHTML( htmlString ){
var bodEle = document.getElementsByTagName('body');
var divEle = createElement("div");
divEle.innerHTML = htmlString;
bodEle.appendChild(divEle);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.