我需要一种不使用innerHTML将HTML附加到容器元素的方法。我不想使用innerHTML的原因是因为当它像这样使用时:
元素。html += htmldata
它的工作原理是先替换所有的html，然后再添加旧的html和新的html。这是不好的，因为它重置动态媒体，如嵌入式flash视频…
我可以这样做，这是可行的:
var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);
然而，这种方式的问题是，在文档中有一个额外的span标签，现在我不想要。
那么如何做到这一点呢?谢谢!
当前回答
检查insertAdjacentHTML()方法。第一个参数是你想要添加字符串的地方("beforebegin"， "afterbegin"， "beforeend"， "afterend")。在OP的情况下，你会使用“beforeend”。第二个参数是html字符串。
基本用法:
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
其他回答
这就是DocumentFragment的意义所在。
var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);
文档。createDocumentFragment, childnodes
对于这个问题，Alnafie给出了一个很好的答案。我想给出一个他的代码示例供参考:
var childNumber = 3; function addChild() { var parent = document.getElementById('i-want-more-children'); var newChild = '<p>Child ' + childNumber + '</p>'; parent.insertAdjacentHTML('beforeend', newChild); childNumber++; } body { text-align: center; } button { background: rgba(7, 99, 53, .1); border: 3px solid rgba(7, 99, 53, 1); border-radius: 5px; color: rgba(7, 99, 53, 1); cursor: pointer; line-height: 40px; font-size: 30px; outline: none; padding: 0 20px; transition: all .3s; } button:hover { background: rgba(7, 99, 53, 1); color: rgba(255,255,255,1); } p { font-size: 20px; font-weight: bold; } <button type="button" onclick="addChild()">Append Child</button> <div id="i-want-more-children"> <p>Child 1</p> <p>Child 2</p> </div>
希望这对其他人有所帮助。
如何边钓鱼边使用严格的代码。在这篇文章的底部需要两个先决条件函数。
xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');
xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');
xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');
添加多个元素(命名空间只需要在父元素上):
xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');
动态可重用代码:
function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}
function xml_add(pos, e, xml)
{
e = (typeof e == 'string' && id_(e)) ? id_(e) : e;
if (e.nodeName)
{
if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
//Add fragment and have it returned.
}
}
<div id="Result">
</div>
<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
document.getElementById('Result').innerHTML += data;
}
</script>
使用“+=”符号为div分配数据，您可以追加数据，包括以前的HTML数据
检查insertAdjacentHTML()方法。第一个参数是你想要添加字符串的地方("beforebegin"， "afterbegin"， "beforeend"， "afterend")。在OP的情况下，你会使用“beforeend”。第二个参数是html字符串。
基本用法:
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
