Чистый javascript метод для обертывания содержимого в div

Ответ 1

Если ваши слайды всегда находятся в слайдах Контейнер, вы можете сделать это

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

Ответ 2

Как и BosWorth99, мне также нравится манипулировать элементами dom, это помогает поддерживать все атрибуты node. Тем не менее, я хотел сохранить позицию элемента в dom, а не просто добавить конец, если бы были братья и сестры. Вот что я сделал.

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

Ответ 3

Если вы исправьте document.getElementsByClassName для 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/

Ответ 4

Мне нравится манипулировать элементами dom непосредственно - createElement, appendChild, removeChild и т.д., в отличие от вставки строк как element.innerHTML. Эта стратегия работает, но я думаю, что собственные методы браузера более прямые. Кроме того, они возвращают новое значение node, сохраняя вас от другого ненужного вызова 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.

Ответ 5

Хороший совет для того, чтобы попытаться сделать то, что вы обычно делаете с 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'))

Ответ 6

Из того, что я понимаю, @Michal отвечает уязвим для атак XXS (использование innerHTML является уязвимостью безопасности) Вот еще одна ссылка на это.

Есть много способов сделать это, тот, который мне нашел и понравился::

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

Надеюсь, это поможет.

Ответ 7

содержимое нескольких тегов 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);
}

ссылка Jsbin