我需要一种不使用innerHTML 将HTML 附加到容器元素的方法。我不想使用innerHTML的原因是因为它是这样使用的：
element.innerHTML += 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>');
给出一个替代方案（因为 usingDocumentFragment似乎不起作用）：您可以通过迭代新生成节点的子节点来模拟它，并且只附加它们。
var e = document.createElement('div');
e.innerHTML = htmldata;
while(e.firstChild) {
element.appendChild(e.firstChild);
}
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);