Javascript – 将HTML追加到没有innerHTML的容器元素
我需要一种方法来将HTML附加到容器元素而不使用innerHTML。 我不想使用innerHTML的原因是因为当它使用像这样：
element.innerHTML += htmldata
它的工作原理是在添加旧的html和新的html之前先replace所有的html。 这是不好的，因为它重置dynamic媒体，如embedded式Flashvideo…
我可以这样做，这是可行的：
var e = document.createElement('span'); e.innerHTML = htmldata; element.appendChild(e);
然而，这种方式的问题是，现在我不想要的文档中有额外的span标签。
这怎么做呢？ 谢谢！
为了给出一个替代scheme（因为使用DocumentFragment似乎不工作）：你可以通过遍历新生成的节点的子节点来模拟它，并且只添加那些节点。
var e = document.createElement('div'); e.innerHTML = htmldata; while(e.firstChild) { element.appendChild(e.firstChild); }
我很惊讶，没有提到insertAdjacentHTML()方法的答案。 看看这里 。 第一个参数是你想要追加string的位置（“beforebegin”，“afterbegin”，“beforeend”，“afterend”）。 在OP的情况下，你可以使用“beforeend”。 第二个参数就是htmlstring。
基本用法：
var d1 = document.getElementById('one'); d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
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>
<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数据在内的数据
这是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);
document.createDocumentFragment ， .childNodes
element.innerHTML *+=* htmldata – element.innerHTML *+=* htmldata
尝试 – element.innerHTML **=+** htmldata如果你不想取代任何东西 – 它只是添加新的数据。
