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 *+=* htmldataelement.innerHTML *+=* htmldata

尝试 – element.innerHTML **=+** htmldata如果你不想取代任何东西 – 它只是添加新的数据。