首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何正确地使用innerHTML从html字符串创建一个元素(包含可能的子元素)?

如何正确地使用innerHTML从html字符串创建一个元素(包含可能的子元素)?
EN

Stack Overflow用户
提问于 2010-09-08 05:13:07
回答 2查看 54.8K关注 0票数 30

注意:I do NOT to use any framework。

目标只是创建一个函数,该函数将返回一个基于HTML字符串的元素。

假设一个简单的HTML文档如下所示:

<html>
<head></head>
<body>
</body>
</html>

所有提到的函数都包含在head部分中,所有DOM创建/操作都是在脚本标记中主体的末尾完成的。

我有一个函数createElement,它接受格式良好的超文本标记语言字符串作为参数。它是这样的:

function createElement(str)
{
  var div = document.createElement('div');
  div.innerHTML = str;
  return div.childNodes;
}

现在,当你像这样调用它时,这个函数工作得很好:

var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');

有一个小问题(可能是大问题),即创建的元素不是'true‘元素,它的parentNode仍然是'div’。如果有人知道如何解决这个问题,那就太棒了。

现在,如果我使用更复杂的字符串调用相同的函数:

var e = createElement('<p id="myId" class="myClass">innerHTML<h2 id="h2ID" class="h2CLASS">Heading2</h2></p>');

它创建两个孩子,而不是一个孩子,而另一个孩子又有另一个孩子。

一旦你做了div.innerHTML = str。innerHTML而不是

`<p id="myId" class="myClass">innerHTML    <h2 id="h2ID" class="h2CLASS">Heading2</h2>    </p>`

转到

`<p id="myId" class="myClass">innerHTML</p>        <h2 id="h2ID" class="h2CLASS">Heading2</h2>`

问题:

在使用.innerHTML?

  • Can之后,我能以某种方式获得一个没有父节点的元素吗?我(在有点复杂的字符串的情况下)让我的函数返回一个带有适当子节点的元素,而不是两个元素。它实际上返回三个、<p.myClass#myId><h2.h2CLASS#h2ID>和另一个<p>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3662821

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档