将内容包装在 div 中的纯 javascript 方法

Question

我想用 JavaScript 包装 #slidesContainer div 中的所有节点。我知道这很容易在 jQuery 中完成，但我有兴趣知道如何使用纯 JS 来完成。

这是代码：

 <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>

我想用 id="slideInner" 将带有“幻灯片”类的 div 一起包装在另一个 div 中。

原文由 Squadrons 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您的“幻灯片”始终在 slidesContainer 中，您可以这样做

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

原文由 Michal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

和 BosWorth99 一样，我也喜欢直接操作 dom 元素，这有助于维护节点的所有属性。但是，我想保持元素在 dom 中的位置，而不仅仅是在有兄弟姐妹的情况下附加末尾。这是我所做的。

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

原文由 user1767210 发布，翻译遵循 CC BY-SA 3.0 许可协议