Méthode javascript pure pour envelopper le contenu dans un div

Question

Je veux envelopper tous les nœuds dans le #slidesContainer avec JavaScript. Je sais que cela se fait facilement en jQuery, mais je suis intéressé de savoir comment le faire avec du JS pur.

Voici le code :

 <div id="slidesContainer">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
</div>

Je veux envelopper les divs avec une classe de "slide" collectivement dans un autre div avec id="slideInner" .

Answer 1

Si vos "diapositives" sont toujours dans slidesContainer, vous pouvez le faire

 org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

Answer 2

Comme BosWorth99, j'aime aussi manipuler directement les éléments dom, cela aide à maintenir tous les attributs du nœud. Cependant, je voulais maintenir la position de l'élément dans le dom et pas seulement ajouter la fin au cas où il y aurait des frères et sœurs. Voici ce que j'ai fait.

 var wrap = function (toWrap, wrapper) {
    wrapper = wrapper || document.createElement('div');
    toWrap.parentNode.appendChild(wrapper);
    return wrapper.appendChild(toWrap);
};

Answer 3

Si vous corrigez document.getElementsByClassName pour IE , vous pouvez faire quelque chose comme :

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

Exemple : http://jsfiddle.net/GkEVm/2/