web-dev-qa-db-fra.com

Méthode javascript pure pour envelopper du contenu dans un div

Je veux envelopper tous les nœuds dans le #slidesContainer div avec JavaScript. Je sais que cela se fait facilement dans jQuery, mais je voudrais savoir comment le faire avec du JS pur.

Voici le code:

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

Je veux envelopper les divs avec une classe de "diapositives" collectivement dans un autre div avec id="slideInner".

javascripthtmlwrap
44
Squadrons

Si vos "diapositives" sont toujours dans slidesContainer, vous pouvez le faire.

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

Comme BosWorth99, j'aime aussi manipuler directement les éléments dom, cela permet de conserver tous les attributs du nœud. Cependant, je voulais maintenir la position de l'élément dans le dom et ne pas simplement ajouter la fin s'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);
};
18
user1767210

Si vous corrigez 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/

11
aroth

J'aime manipuler directement les éléments dom - createElement, appendChild, removeChild, etc., par opposition à l'injection de chaînes comme element.innerHTML. Cette stratégie fonctionne, mais je pense que les méthodes de navigateur natif sont plus directes. En outre, ils renvoient la valeur d'un nouveau nœud, ce qui vous évite un autre appel getElementById inutile. 

C’est très simple et il faudrait y associer tout type d’événement.

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 vous aidera à comprendre ce problème avec Vanilla js.

7
Bosworth99

Un bon conseil pour essayer de faire quelque chose que vous feriez normalement avec jQuery, sans jQuery, est de regarder la source jQuery . Que font-ils? Eh bien, ils récupèrent tous les enfants, les ajoutent à un nouveau noeud, puis ajoutent ce noeud à l'intérieur du parent.

Voici une petite méthode simple pour faire 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'))
2
Ansikt

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 à ce sujet.

Il y a plusieurs façons de faire ceci, celui 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);

Ça marche bien. Cependant, pour moi, je veux parfois simplement envelopper des parties d'un élément. J'ai donc modifié la fonction en 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 ça aide.

0
Will

wrapInner contenu de plusieurs balises

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

0
viet nam