San*_*hit 23 javascript string dom innerhtml
注:我不希望使用任何框架.
假设一个简单的HTML文档,如下所示:
<html>
<head></head>
<body>
</body>
</html>
提到的所有函数都包含在head部分中,所有DOM创建/操作都在body标记的主体末尾完成.
我有一个函数createElement,它将一个格式良好的HTML String作为参数.它是这样的:
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'元素,它仍然有一个'div'的parentNode.如果有人知道如何解决这个问题,那将是非常棒的.
现在,如果我使用更复杂的字符串调用相同的函数:
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>`
<p.myClass#myId>,<h2.h2CLASS#h2ID>,和另一个<p>]use*_*716 17
这类似于答案palswim,除了它不打扰创建克隆,while()而是使用循环,总是在节点附加[0].
function createElement( str ) {
var frag = document.createDocumentFragment();
var elem = document.createElement('div');
elem.innerHTML = str;
while (elem.childNodes[0]) {
frag.appendChild(elem.childNodes[0]);
}
return frag;
}
| 归档时间： |
|
| 查看次数： |
42374 次 |
| 最近记录： |