我想#slidesContainer用 JavaScript包装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".
如果您的“幻灯片”始终在 slidesContainer 中，您可以这样做
org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;
和 BosWorth99 一样，我也喜欢直接操作 dom 元素，这有助于维护节点的所有属性。但是，我想保持元素在 dom 中的位置，而不仅仅是在有兄弟姐妹的情况下追加结尾。这是我所做的。
var wrap = function (toWrap, wrapper) {
wrapper = wrapper || document.createElement('div');
toWrap.parentNode.appendChild(wrapper);
return wrapper.appendChild(toWrap);
};
如果您为 IE 修补 document.getElementsByClassName，您可以执行以下操作：
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);
}
我认为这是非常好的代码示例 - 该解决方案保留了绑定事件
// 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);
或者
function wrap(el, wrapper) {
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
}
// example: wrapping an anchor with class "wrap_me" into a new div element
wrap(document.querySelector('div.wrap_me'), document.createElement('div'));
参考
https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28/
我喜欢直接操作 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 的这个问题。