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"
.
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;
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);
};
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/
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'));
}
Peut-être que cela vous aidera à comprendre ce problème avec Vanilla js.
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'))
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.
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);
}