Méthode javascript pur pour envelopper le contenu dans une div

comme BosWorth99, j'aime aussi manipuler les éléments dom directement, cela aide à maintenir tous les attributs du noeud. Cependant, je voulais maintenir la position de l'élément dans le dom et pas seulement ajouter la fin incase il y avait des frères et sœurs. Voici ce que j'ai fait.

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

Si vous patch document.getElementsByClassName pour IE , vous pouvez faire quelque chose comme:

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

exemple: http://jsfiddle.net/GkEVm/2 /

j'aime manipuler les éléments dom directement-createElement, appendChild, removeChild etc. par opposition à l'injection de cordes comme element.innerHTML . Cette stratégie fonctionne, mais je pense que les méthodes natives du navigateur sont plus directes. De plus, ils retournent la valeur d'un nouveau noeud, vous sauvant d'un autre appel inutile getElementById .

c'est vraiment simple, et devrait être attaché à un certain type d'événement pour faire n'importe quel usage de.

wrap();
function wrap() {
    var newDiv = document.createElement('div');
    newDiv.setAttribute("id", "slideInner");
    document.getElementById('wrapper').appendChild(newDiv);
    newDiv.appendChild(document.getElementById('slides'));
}

jsFiddle

peut-être que cela aide votre compréhension de cette question avec vanilla js.

un bon conseil général pour essayer de faire quelque chose que vous feriez normalement avec jQuery, sans jQuery, est de regarder la source de jQuery . Que font-ils? Ils attrapent tous les enfants, les ajoutent à un nouveau noeud, puis ajoutent ce noeud à l'intérieur du parent.

Voici une simple petite méthode pour faire exactement cela:

const wrapAll = (target, wrapper = document.createElement('div')) => {
  ;[ ...target.childNodes ].forEach(child => wrapper.appendChild(child))
  target.appendChild(wrapper)
  return wrapper
}

et voici comment vous l'utilisez:

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

D'après ce que je comprends, la réponse de @Michal est vulnérable aux attaques XXS (utiliser innerHTML est une vulnérabilité de sécurité) voici un autre lien sur ce lien.

il y a plusieurs façons de faire cela, une que j'ai trouvé et aimé est :

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

cela fonctionne bien. Cependant, pour moi, j'ai parfois envie de simplement envelopper des parties d'un élément. J'ai donc modifié l' fonction à ceci:

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

j'espère que cela aidera.

wrapInner plusieurs le contenu de la balise

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

Lien De Démo Jsbin