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

我想用JavaScript包装

#slidecontainer

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>

幻灯片1
幻灯片2
幻灯片3
幻灯片4

我想用一类“slide”将div打包到另一个div中，使用

id=“slideInner”

如果可以，可以执行以下操作：

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

var addedToDocument=false；
var wrapper=document.createElement（“div”）；
wrapper.id=“slideInner”；
var nodesToWrap=document.getElementsByClassName（“幻灯片”）；
对于（var index=0；index

示例：

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

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

org\u html=document.getElementById（“SlideContainer”）.innerHTML；
新建_html=“”+组织_html+”；
document.getElementById（“SlideContainer”）.innerHTML=new\uHTML；

我喜欢直接操作dom元素——createElement、appendChild、removeChild等，而不是像

element.innerHTML那样插入字符串。这种策略确实有效，但我认为本地浏览器方法更直接。此外，它们还返回一个新节点的值，从而避免了另一个不必要的
getElementById
调用

这真的很简单，需要附加到某种类型的事件中才能使用

wrap();
function wrap() {
    var newDiv = document.createElement('div');
    newDiv.setAttribute("id", "slideInner");
    document.getElementById('wrapper').appendChild(newDiv);
    newDiv.appendChild(document.getElementById('slides'));
}


也许这有助于您理解vanilla js的这个问题。
像BosWorth99一样，我也喜欢直接操作dom元素，这有助于维护节点的所有属性。但是，我希望保持元素在dom中的位置，而不是在有兄弟元素的情况下只追加end。这就是我所做的

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

据我所知，迈克尔的答案是

有很多方法可以做到这一点：

这很有效。但是对我来说，有时我只想包装元素的一部分。因此，我将函数修改为：

function wrap_some_children(el, wrapper, counter) {
  el.parentNode.insertBefore(wrapper, el);
  if ( ! counter ) {
    counter = el.childNodes.length;
  }
  for(i = 0; i < counter;  i++) {
    wrapper.appendChild( el.childNodes[0] );
  }
}
// wrapping parts of the event form into columns
let divCol1;
let divCol2;
// the elements to wrap
elementToWrap = document.querySelector('selector');
// creating elements to wrap with
divCol1 = document.createElement('div');
divCol1.className = 'col-sm-6';
divCol2 = document.createElement('div');
divCol2.className = 'col-sm-6';
// for the first column
wrap_some_children(elementToWrap, divCol1, 13);  // only wraps the first 13 child nodes
// for the second column
wrap_some_children(elementToWrap, divCol2);

函数包装一些子函数（el、包装器、计数器）{
el.parentNode.insertBefore（包装器，el）；
如果（！计数器）{
计数器=el.childNodes.length；
}
对于（i=0；i

我希望这能有所帮助。
包装多标签内容


函数wilWrapInner（el，wrapInner）{
var_el=[].slice.call（el.children）；
var fragment=document.createDocumentFragment（）；
el.insertAdjacentHTML（“后开始”，wrapInner）；
var_wrap=el.children[0]；
对于（变量i=0，len=_el.length；i


这是一个很好的技巧，用于尝试在没有jQuery的情况下使用jQuery执行一些正常操作。他们是干什么的？它们抓取所有子节点，将它们附加到一个新节点，然后将该节点附加到父节点中

这里有一个简单的小方法可以精确地做到这一点：

const wrapAll = (target, wrapper = document.createElement('div')) => {
  ;[ ...target.childNodes ].forEach(child => wrapper.appendChild(child))
  target.appendChild(wrapper)
  return wrapper
}

下面是您如何使用它：

// wraps everything in a div named 'wrapper'
const wrapper = wrapAll(document.body) 

// wraps all the children of #some-list in a new ul tag
const newList = wrapAll(document.getElementById('some-list'), document.createElement('ul'))

我认为这是一个非常好的代码示例—此解决方案保留绑定的事件

// element that will be wrapped
var el = document.querySelector('div.wrap_me');
// create wrapper container
var wrapper = document.createElement('div');
// insert wrapper before el in the DOM tree
el.parentNode.insertBefore(wrapper, el);
// move el into wrapper
wrapper.appendChild(el);

或

参考号

一个简单的方法是：

let el = document.getElementById('slidesContainer');
el.innerHTML = `<div id='slideInner'>${el.innerHTML}</div>`;

let el=document.getElementById（'slideContainer'）；
el.innerHTML=`${el.innerHTML}`；
简单地包装一个div而不需要父级：

<div id="original">ORIGINAL</div>

<script>

document.getElementById('original').outerHTML
=
'<div id="wrap">'+
document.getElementById('original').outerHTML
+'</div>'

</script>

let original = document.getElementById('original');
let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.appendChild(original.cloneNode(true));

original.replaceWith(wrapper);

工作示例：
您可能需要测试您的答案。有一些错误。@patrick-是的，看来操作顺序就是一切。现在应该修好了。@aroth:是的，现在可以修好了。如果您只需在循环外添加包装器，就可以简化一些。另外，请记住，DOM节点一次只能位于一个位置，因此实际上不需要执行
removeChild
然后执行
appendChild
。只需执行
appendChild
，它就会将其从当前位置删除；o） @patrick-更干净，尽管如果没有与`GetElementsByCassName？@中队匹配的元素，修改后的版本不会出错，
addedToDocument
变量只是一个表示包装器元素是否已添加到DOM的标志。其原因是1）包装器div的插入位置取决于匹配的节点，2）可能没有匹配的节点，在这种情况下，包装器根本不应该添加到DOM中，3）当有多个节点匹配时，包装器只应该在第一次匹配之前添加到DOM中一次。该标志只是确保这些条件都满足。@中队：您也在使用jQuery吗？如果是这样，你真的不应该这样做。（即使没有，也在不必要地破坏和重新创建DOM的这一部分。）我没有使用jquery。在我转向一个框架之前，我试图对JS有点熟悉。不过，我正在尝试这篇文章中的所有答案。你推荐aroth的答案吗？如果是这样的话，为什么要跳过这一步呢？我的答案比在节点级别上操作要慢一点，但是除非您有很多节点（幻灯片），否则差异应该是不可察觉的。如果您正在使用jquery或将任何事件连接到幻灯片，则需要重新扫描dom。但是，这种方法可以在大多数浏览器中使用，而无需
let el = document.getElementById('slidesContainer');
el.innerHTML = `<div id='slideInner'>${el.innerHTML}</div>`;

<div id="original">ORIGINAL</div>

<script>

document.getElementById('original').outerHTML
=
'<div id="wrap">'+
document.getElementById('original').outerHTML
+'</div>'

</script>

let original = document.getElementById('original');
let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.appendChild(original.cloneNode(true));

original.replaceWith(wrapper);