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>

我想用另一个div id="slideInner"在一个“幻灯片”中包含div。

Answer 1

如果你的“幻灯片”总是在slideContainer中你可以这样做

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

Answer 2

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

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

Answer 3

如果您patch up document.getElementsByClassName for IE，您可以执行以下操作：

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

示例：http://jsfiddle.net/GkEVm/2/

Answer 4

我喜欢直接操作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

也许这有助于您使用vanilla js来理解这个问题。

Answer 5

一个很好的提示，试图做一些你通常用jQuery做的事情，没有jQuery，is to look at the jQuery source。他们在做什么？好吧，他们抓住所有孩子，将它们附加到一个新节点，然后将该节点附加到父节点内。

这是一个简单的方法，可以做到这一点：

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

Answer 6

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

// 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('a.wrap_me'), document.createElement('div'));

ref

https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28/

Answer 7

一个简单的方法是：

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

Answer 8

要简单地包装div而不需要父级：

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

<script>

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

</script>

工作示例： https://jsfiddle.net/0v5eLo29/

Answer 9

根据我的理解@Michal的回答是vulnerable to XXS attacks (using innerHTML is a security vulnerability) Here is another link on this.

有很多方法可以做到这一点，one that I found and liked is：

function wrap_single(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}
let divWrapper;
let elementToWrap;
elementToWrap = document.querySelector('selector');
// wrapping the event form in a row
divWrapper = document.createElement('div');
divWrapper.className = 'row';
wrap_single(elementToWrap, divWrapper);

这很有效。然而对我来说，我有时想要包装元素的一部分。所以我将函数修改为：

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

我希望这会有所帮助。

Answer 10

wrapInner多个标签内容

function wilWrapInner(el, wrapInner) {
  var _el = [].slice.call(el.children);
  var fragment = document.createDocumentFragment();
  el.insertAdjacentHTML('afterbegin', wrapInner);
  var _wrap = el.children[0];
  for (var i = 0, len = _el.length; i < len; i++) {
    fragment.appendChild(_el[i]);
  }
  _wrap.appendChild(fragment);
}

Link Demo Jsbin

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

10 个答案: