纯JavaScript方法来包装div中的内容 [英] Pure javascript method to wrap content in a div

问题描述

我想用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> 
  

我想用一个幻灯片集合在另一个div中用<$ c如果您的幻灯片始终处于幻灯片状态，那么您可以使用幻灯片 slidesContainer你可以做到这一点

  org_html = document.getElementById（slidesContainer）。innerHTML; 
 new_html =< div id ='slidesInner'> + org_html +< / div>; 
 document.getElementById（slidesContainer）。innerHTML = new_html; 
  

I want to wrap all the nodes within the #slidesContainer div with JavaScript. I know it is easily done in jQuery, but I am interested in knowing how to do it with pure JS.

Here is the 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>

I want to wrap the divs with a class of "slide" collectively within another div with id="slideInner".

解决方案

If your "slide"s are always in slidesContainer you could do this

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

这篇关于纯JavaScript方法来包装div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！