我想使用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>
我希望将具有class为"slide"的div元素作为整体，放置在另一个拥有id="slideInner"的div元素内。
org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;
// 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);
}
// call function
// wrapping element "wrap_me" into a new element "wrapper"
wrap(document.querySelector('div.wrap_me'), document.createElement('div'));
引用
https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28
像BosWorth99一样，我也喜欢直接操作dom元素，这有助于维护所有节点的属性。但是，我想保持元素在dom中的位置，而不仅仅是将其附加到末尾，以防有兄弟节点。这是我所做的。
var wrap = function (toWrap, wrapper) {
wrapper = wrapper || document.createElement('div');
toWrap.parentNode.insertBefore(wrapper, toWrap);
return wrapper.appendChild(toWrap);
};
function wrap(toWrap, wrapper) {？ - darchertoWrap 不是最后一个子元素，则 wrapper 就会成为错误的子元素（它最终会成为最后一个子元素）。更好的方法是使用 insertBefore()，例如将 toWrap.parentNode.appendChild(wrapper); 替换为 toWrap.parentNode.insertBefore(wrapper, toWrap);。 - MoonLite如果你想在没有jQuery的情况下完成通常需要使用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'))
parentNode.append 代替 appendChild。例如：wrapper.append(...target.childNodes)。 - Azmisovvar 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);
}
removeChild然后执行appendChild。只需执行appendChild即可，它将从当前位置中删除该节点。http://jsfiddle.net/GkEVm/3/ ；o） - user113716getElementsByclassName没有匹配到任何元素，修改后的版本不会出现错误吗？ - arothif( nodesToWrap[0] )。 - user113716addedToDocument 变量只是一个标志，用于指示包装元素是否已添加到 DOM 中。其原因是：1）包装 div 的插入位置取决于匹配的节点；2）可能没有匹配的节点，在这种情况下，包装器根本不应该添加到 DOM 中；3）当有多个节点匹配时，包装器应该只在第一个匹配项前添加到 DOM 中一次。该标志仅确保满足所有这些条件。 - aroth我喜欢直接操作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'));
}
这里提供的 jsFiddle 可能有助于您理解使用原生 JavaScript 解决此问题。
简单地包装一个 div，而不需要父元素：
<div id="original">ORIGINAL</div>
<script>
document.getElementById('original').outerHTML
=
'<div id="wrap">'+
document.getElementById('original').outerHTML
+'</div>'
</script>
工作示例：https://jsfiddle.net/0v5eLo29/
更实用的方法：
const origEle = document.getElementById('original');
origEle.outerHTML = '<div id="wrap">' + origEle.outerHTML + '</div>';
或仅使用节点：
let original = document.getElementById('original');
let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.append(original.cloneNode(true));
original.replaceWith(wrapper);
let el = document.getElementById('slidesContainer');
el.innerHTML = `<div id='slideInner'>${el.innerHTML}</div>`;
range API 可以轻松地进行包装，方法是创建一个 Range，该 Range 选择 仅需要包装的节点，然后使用 surroundContents API 进行包装。<mark> 元素包装，并将最后一个节点用 <u> 元素包装：
const wrapNode = (nodeToWrap, wrapWith) => {
const range = document.createRange();
range.selectNode(nodeToWrap);
range.surroundContents(wrapWith);
}
wrapNode(document.querySelector('p').firstChild, document.createElement('mark'))
wrapNode(document.querySelector('p').lastChild, document.createElement('u'))<p>
first node
<span>second node</span>
third node
</p>const wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
document.querySelector('#slidesContainer').appendChild(wrapper);
// select all the elements we want to wrap
const slides = document.querySelectorAll(".slide");
// loop over the elements
slides.forEach((item, index) => {
// add the element to the wrapper
wrapper.appendChild(item);
});.wrapper {
border: 1px solid black;
}<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>使用querySelectorAll、forEach、createElement和before方法
// select all the elements we want to wrap
const slides = document.querySelectorAll(".slide");
// loop over the elements
slides.forEach((item, index) => {
const wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
item.before(wrapper);
// add the element to the wrapper
wrapper.appendChild(item);
});.wrapper {
border: 1px solid black;
}<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>如果你想要将多个物品用一个包装纸包起来，你可以使用一个循环和取模运算来确定是否需要新的包装元素。
// convert html collection into an array
const slides = [...document.querySelectorAll(".slide")];
slides.reduce((wrapper, item, index) => {
// Every 2 so if we are at a start create a new wrapper element
// And place it before the html element we want to move
if (index % 2 === 0) {
wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
item.before(wrapper);
}
// add the element to the wrapper
wrapper.appendChild(item);
// keep track of the wrapper
return wrapper;
}, null);.wrapper {
border: 1px solid black;
}<div id="slidesContainer">
<div class="slide">slide 1a</div>
<div class="slide">slide 1b</div>
<div class="slide">slide 2a</div>
<div class="slide">slide 2b</div>
<div class="slide">slide 3a</div>
<div class="slide">slide 3b</div>
<div class="slide">slide 4a</div>
<div class="slide">slide 4b</div>
</div>