Je veux envelopper tous les noeuds de la div #slidesContainer
avec JavaScript. Je sais que cela se fait facilement dans jQuery, mais je suis intéressé à savoir comment le faire avec JS pure.
Voici le code:
Je veux envelopper les divs avec une classe de “slide” collectivement dans une autre div avec id="slideInner"
.
Si vos “diapositives” sont toujours dans slidesContainer, vous pouvez le faire
org_html = document.getElementById("slidesContainer").innerHTML; new_html = "" + org_html + ""; document.getElementById("slidesContainer").innerHTML = new_html;
Comme BosWorth99, j’aime aussi manipuler directement les éléments dom, ce qui permet de conserver tous les atsortingbuts du nœud. Cependant, je voulais conserver la position de l’élément dans le dom et ne pas simplement append la fin si des frères et soeurs étaient présents. 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 Internet Explorer , 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 du navigateur natif sont plus directes. De plus, ils renvoient la valeur d’un nouveau noeud, vous évitant ainsi un autre appel getElementById
inutile.
Ceci est très simple et devrait être associé à un type d’événement à utiliser.
wrap(); function wrap() { var newDiv = document.createElement('div'); newDiv.setAtsortingbute("id", "slideInner"); document.getElementById('wrapper').appendChild(newDiv); newDiv.appendChild(document.getElementById('slides')); }
jsfiddle
Peut-être que cela vous aide à comprendre ce problème 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 jQuery . Que font-ils? Eh bien, ils attrapent tous les enfants, les ajoutent à un nouveau nœud, puis ajoutent ce nœud au parent.
Voici une petite méthode simple pour faire précisément 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 j’ai compris, la réponse de @Michal est vulnérable aux attaques de XXS (utiliser la méthode innerHTML est une vulnérabilité de sécurité) Voici un autre lien à ce sujet.
Il y a plusieurs façons de le faire, un 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, je veux parfois envelopper des parties d’un élément. J’ai donc modifié la 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 ç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); }
Lien Demo Jsbin