Javascript -向容器元素追加超文本标记语言，不带innerHTML
Javascript -向容器元素追加超文本标记语言，不带innerHTML
提问于 2011-06-10 17:28:00
我需要一种方法来追加超文本标记语言到一个容器元素，而不使用innerHTML。我不想使用innerHTML的原因是因为当它像这样使用时：
element.innerHTML += htmldata
它的工作方式是先替换所有的html，然后再添加旧的html和新的html。这是不好的，因为它重置动态媒体，如嵌入式flash视频...
我可以这样做，这是可行的：
var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);然而，这种方式的问题是，现在文档中有额外的span标记，这是我不希望的。
如何做到这一点呢？谢谢!
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-06-10 18:10:58
给出另一种选择(因为使用DocumentFragment似乎行不通)：您可以通过迭代新生成的节点的子节点来模拟它，并只附加这些子节点。
var e = document.createElement('div');
e.innerHTML = htmldata;
while(e.firstChild) {
element.appendChild(e.firstChild);
}Stack Overflow用户
发布于 2012-03-24 19:51:22
令我惊讶的是，答案中没有一个提到insertAdjacentHTML()方法。请查看here。第一个参数是字符串的附加位置("beforebegin"，"afterbegin"，"beforeend"，"afterend")。在操作员的情况下，你应该使用"beforeend“。第二个参数就是html字符串。
基本用法：
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');Stack Overflow用户
发布于 2017-02-03 03:52:06
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>
希望这对其他人有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6304453
复制相关文章
相似问题