Javascript-将HTML附加到容器元素而不使用innerHTML

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

element.innerHTML+=htmldata

它的工作原理是先替换所有的html，然后再添加旧的html和新的html。这是不好的，因为它重置动态媒体，如嵌入式flash视频

我可以这样做，这很有效：

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

然而，这样做的问题是，现在文档中有一个额外的span标记，我不希望这样做

那怎么办呢？谢谢

这就是我们的目的

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);

var frag=document.createDocumentFragment（）；
var span=document.createElement（“span”）；
span.innerHTML=htmldata；
对于（变量i=0，ii=span.childNodes.length；i

，

给出一个替代方案（因为使用

DocumentFragment

似乎不起作用）：您可以通过迭代新生成节点的子节点并仅附加这些子节点来模拟它

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

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

---

我很惊讶没有一个答案提到

insertAdjacentHTML（）

方法。过来看。第一个参数是您希望附加字符串并获取的位置（“beforebegin”、“afterbegin”、“beforeend”、“afterend”）。在OP的情况下，您可以使用“beforeed”。第二个参数就是html字符串

基本用法：

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

var d1=document.getElementById（'one'）；
d1.插入相邻的TML（'beforeend'，'two'）；

对于（var i=0；ialnafie对这个问题有一个很好的答案。我想举一个他的代码示例供参考：


var childNumber=3；
函数addChild（）{
var parent=document.getElementById（'i-want-more-children'）；
var newChild='Child'+childNumber+'
'；
parent.insertAdjacentHTML（'beforeed'，newChild）；
childNumber++；
}
正文{
文本对齐：居中；
}
钮扣{
背景：rgba（7,99,53,1）；
边框：3倍实心rgba（7,99,53,1）；
边界半径：5px；
颜色：rgba（7,99,53,1）；
光标：指针；
线高：40px；
字体大小：30px；
大纲：无；
填充：0 20px；
过渡：全部3秒；
}
按钮：悬停{
背景：rgba（7,99,53,1）；
颜色：rgba（255255,1）；
}
p{
字体大小：20px；
字体大小：粗体；
}
附加子对象
儿童1

儿童2

如何在使用严格代码的同时进行钓鱼和钓鱼。本文底部需要两个必备功能

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

我刚刚测试了这个，但它不起作用。应该这样使用吗？你从哪里得到
（a）
from？这是一个输入错误吗？是的，这是一个输入错误，它应该是e。我认为您不能使用innerHTML作为片段。这不是working@Bob我已经选择了逃避使用jQuery。jQuery不不！我不会仅仅为了一个小功能而包含jQuery:\这只是杀伤力太大了。我尝试了你的解决方案，也尝试了被接受的解决方案。两者都有效，但你的有效只有2行，没有循环。对我来说，这听起来像是一个赢家。供任何可能选择此路线的人参考：此方法对IE9中的表不起作用。在Chrome中，它告诉我
未捕获类型错误：未定义不是一个函数
！此隐藏的宝石需要更多曝光。此方法在Chrome中无法自动完成，这相当令人恼火V79这个问题特别要求不要使用
element.innerHTML+=data
。我不喜欢拘泥于规则，但我认为如果您创建一个演示（JSFIDLE、codepen等）会更好然后通过使用编辑功能或提交评论将其添加到Alnafie的答案中。创建一个答案只是为了演示另一个用户的答案是不可行的，不管您提供的信息有多有用。想象一下，如果每个用户都决定通过创建一个答案来演示另一个答案，这会变得很混乱。为什么不使用Jq呢uery？请查看下面我的详细答案。我以为我们正在寻找一种不使用“innerHTML”的解决方案@kennydelacruz:OP不想将新HTML附加到现有HTML中，因为它会破坏并重新创建现有元素。OP通过创建新元素并附加该元素找到了解决方案，但他们不想添加其他元素。我只是扩展了该解决方案，以显示他们可以移动/附加新创建的元素，而这些元素不需要“它不会影响现有元素。我知道这很旧，但有人能向我解释为什么可以迭代e.firstChild吗？@ToastGeret:这是一个示例，它不是迭代
e.firstChild
。而是检查
e
是否有子元素，如果是，则将该子元素移到元素上。”。
xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}