insertAdjacentHTML未使用documentfragment

Question

我有一个父节点和一些元素，然后我制作了一个片段，克隆了一些节点，将它们放在片段中，然后尝试使用insertAdjacentHTML代码将片段插入到dom中，如下所示

<div id="slide-container">
    <div class="page1">page0</div>
    <div class="page1">page1</div>
    <div class="page1">page2</div>
    <div class="page1">page3</div>
    <div class="page1">page4</div>
  </div>
<script>
var e = document.querySelector('#slide-container'), f = new DocumentFragment();
//add some elements to the fragment then try to insert them depending on some conditions
e.insertAdjacentHTML('afterbegin',f)
</script>

Answer 1

文档片段基本上是节点的抽象容器。它不是HTML。

insertAdjacentElement方法也不起作用。您可以改用.insertBefore。

​

var e = document.querySelector('#slide-container'),
  f = new DocumentFragment();

f.appendChild(document.createElement("div")).textContent = "works!";

e.insertBefore(f, e.firstChild)

<div id="slide-container">
  <div class="page1">page0</div>
  <div class="page1">page1</div>
  <div class="page1">page2</div>
  <div class="page1">page3</div>
  <div class="page1">page4</div>
</div>

​