Чистый метод javascript, чтобы обернуть содержимое в div - PullRequest
Новая
       3

Чистый метод javascript, чтобы обернуть содержимое в div

45 голосов
/ 27 июля 2011

Я хочу обернуть все узлы в #slidesContainer div с помощью JavaScript.Я знаю, что это легко сделать в 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 скласс «скользить» вместе в другом div с id="slideInner".

Ответы [ 7 ]

55 голосов
/ 27 июля 2011

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

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;
19 голосов
/ 27 августа 2013

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

var wrap = function (toWrap, wrapper) {
    wrapper = wrapper || document.createElement('div');
    toWrap.parentNode.appendChild(wrapper);
    return wrapper.appendChild(toWrap);
};
11 голосов
/ 27 июля 2011

Если вы исправите 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/

7 голосов
/ 27 июля 2011

Мне нравится напрямую управлять элементами 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.

2 голосов
/ 22 января 2018

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

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

0 голосов
/ 02 декабря 2017

Насколько я понимаю, ответ @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);

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

...