首页 文章

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

提问于
浏览 次
130

我需要一种方法将HTML附加到容器元素而不使用innerHTML . 我不想使用innerHTML的原因是因为它使用时如下：

element.innerHTML += htmldata

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

我能用这种方式做到这一点：

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

然而，这种方式的问题是文档中现在有额外的span标记，我不想要 .

那怎么办呢？谢谢！

javascript html innerhtml

5 回答

  • 77

    提供替代方法（因为使用 DocumentFragment 似乎不起作用）：您可以通过迭代新生成的节点的子节点来模拟它，并仅附加它们 .

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

while(e.firstChild) {
    element.appendChild(e.firstChild);
}
    回复于
  • 2

    我很惊讶没有一个答案提到 insertAdjacentHTML() 方法 . 看看here . 第一个参数是您希望附加字符串的位置（"beforebegin"，"afterbegin"，"beforeend"，"afterend"） . 在OP的情况下，你会使用"beforeend" . 第二个参数只是html字符串 .

    基本用法：

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

    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>

    希望这对其他人有帮助 .

    回复于
  • 12
    <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数据

    回复于
  • 450

    这就是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

    回复于

相关问题