I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an example of the code:
<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 container = document.querySelector('#slide-container'), fragment = new DocumentFragment();
// Add elements to the fragment and then try to insert them based on certain conditions
container.insertAdjacentHTML('afterbegin', fragment)
</script>