JSFiddle - React, Tailwind, and code Playground
by slawe
HTML
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<div class="blogPost ">
<h2><a href="#">ANDREW CEDERMARK, DUSTIN WONG, FAMILY TREES, ZOMBIE ORGY</a></h2>
<p class="date">Saturday, July 23</p>
<div class="blogBody">
<p> TALLC Presents: Andrew Cedermark, Dustin Wong, Family Trees & Zombie Orgy</p>
<p>Check out the <a href="link.html">Titus Andronicus blog</a> for more info on this show</p>
<p>Andrew Cedermark Live from the <a href="link.html">Shea Stadium Archives.</a></p>
</div><!--END BLOGBODY-->
<div class="meta">
<ul>
<li><a href="http://google.com ">read more...</a></li>
<li><a href="">Tweet This</a></li>
<li><a href="">re-post on facebook</a></li>
</ul>
</div><!--end META-->
</div><!--END BLOGPOST-->
</div><!--END slide1-->
<div class="slide">
<div class="blogPost ">
<h2><a href="#">ANDREW CEDERMARK, DUSTIN WONG, FAMILY TREES, ZOMBIE ORGY</a></h2>
<p class="date">Saturday, July 23</p>
<div class="blogBody">
<p> TALLC Presents: Andrew Cedermark, Dustin Wong, Family Trees & Zombie Orgy</p>
<p>Check out the <a href="link.html">Titus Andronicus blog</a> for more info on this show</p>
<p>Andrew Cedermark Live from the <a href="link.html">Shea Stadium Archives.</a></p>
</div><!--END BLOGBODY-->
<div class="meta">
<ul>
<li><a href="http://google.com ">read more...</a></li>
<li><a href="">Tweet This</a></li>
<li><a href="">re-post on facebook</a></li>
</ul>
</div><!--end META-->
</div><!--END...
JavaScript
var addedToDocument = false;
var wrapper = document.createElement("div");
wrapper.id = "slideInner";
var nodesToWrap = document.getElementsByClassName("slide");
for (var index = 0; index < nodesToWrap.length; index++) {
var node = nodesToWrap[index];
if (! addedToDocument) {
node.parentNode.insertBefore(wrapper, node);
addedToDocument = true;
}
node.parentNode.removeChild(node);
wrapper.appendChild(node);
}
alert(document.getElementById("slidesContainer").innerHTML);