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

发布于 2024-11-15 03:45:01 字数 875 浏览 1 评论 0原文

我在让我的代码在 IE9 中运行时遇到了一些严重的问题，在 Chrome 和 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 父项中，它必须将主体作为其父项。

非常感谢你的帮助，

理查德

原文

I'm having some serious trouble getting my code to work in IE9, works fine in Chrome & Firefox but I throws some errors. 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.

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. I was doing element.innerHTML+=newData;

So basically, I need 2 things:

1) A way to create a new element from an html string.
2) 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.

Thanks very much for your help,

Richard

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

复古式 2024-11-22 03:45:01

innerHTML 是可读写的，并且会破坏 div 内的任何内容。使用时要格外小心

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

innerHTML is read write and will destroy anything inside your div. use with extreme care

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

回复收藏 0 原文

清欢 2024-11-22 03:45:01

所以基本上，我需要两件事：
一种从 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

在上面的示例中，如果您不需要能够在正文前面添加内容（即在已存在的内容之前插入内容），那么只需将脚本标记放在原始内容之后，不要使用 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>

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

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

In the above example, if you don't need to be able to prepend to the body (i.e. insert content before what already exists), then simply place the script tag after the original content and don't use 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>

回复收藏 0 原文

~没有更多了~