Javascript - 将 HTML 附加到没有 innerHTML 的容器元素

javascript html innerhtml

2022-08-30 00:54:34

我需要一种方法来将HTML附加到容器元素而不使用innerHTML。我不想使用innerHTML的原因是因为当它像这样使用时：

element.innerHTML += htmldata

它的工作原理是在添加旧的html加上新的html之前先替换所有html。这并不好，因为它会重置动态媒体，例如嵌入式Flash视频...

我可以这样做：工作原理：

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

但是，这种方式的问题在于，现在文档中有一个额外的span标签，我不想要它。

那么，这怎么能做到呢？谢谢！

答案 1

我很惊讶没有一个答案提到这种方法。点击这里查看。第一个参数是您希望字符串追加和获取的位置（“beforebegin”，“afterbegin”，“beforeend”，“afterend”）。在OP的情况下，你会使用“beforeend”。第二个参数只是 html 字符串。insertAdjacentHTML()

基本用法：

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

答案 2

为了给出一个替代方案（因为 using 似乎不起作用）：您可以通过迭代新生成的节点的子节点并仅追加这些子节点来模拟它。DocumentFragment

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}