Pure méthode javascript pour envelopper le contenu dans un div

Je veux de l'emballage de tous les nœuds à l'intérieur du #slidesContainer div avec JavaScript. Je sais que c'est facile à faire en jQuery, mais je suis intéressé de savoir comment le faire avec de la pure JS.

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 enrouler la balise div avec une classe de "slide" collectivement dans une autre div avec id="slideInner".

InformationsquelleAutor Squadrons | 2011-07-27

56

Si votre "slide"sont toujours dans slidesContainer que vous pourriez faire ce
```
org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;
```
- Cela a parfaitement fonctionné, et a été assez simple, même pour moi à comprendre. Je vous remercie.
- Êtes-vous également à l'aide de jQuery? Si donc, vous ne devriez vraiment pas faire cela. (Même si vous n'êtes pas, vous êtes détruire et recréer cette partie du DOM inutilement.)
- Je ne suis pas à l'aide de jquery. Je vais essayer d'aller un peu à l'aise avec JS avant de passer à un cadre. Je suis en train d'essayer toutes les réponses dans ce thread, cependant. Recommandez-vous aroth de réponse? Si oui, pourquoi celle-ci?
- Ma réponse est un peu plus lent que d'exploitation sur un nœud de niveau, cependant, sauf si vous avez beaucoup de nœuds(diapositives), la différence devrait être imperceptible. Si vous utilisez jquery/ou de disposer de tous les événements filaire pour les diapositives, vous devrez effectuer une nouvelle analyse du dom. Toutefois, cette méthode fonctionne dans la plupart des navigateurs sans la nécessité de traiter avec getElementsByClass nom des incompatibilités. Donc, pour une fonctionnalité simple (et pas trop complexe DOM) c'est probablement mieux....Important-à-dire que si vous avez de la création de diapositives de manière dynamique, il est plus rapide d'utiliser innerHtml plutôt que de construire des DOM arbre de nœud en nœud.
- Intéressant, merci pour l'information.
- Notez que le remplacement de innerHTML va supprimer des événements de tous les nœuds contenus.
- Ce sera nuke les gestionnaires d'événements ou de ce que vous avez sur les éléments, et il est assez lent. Je préfère @user113716 réponse
InformationsquelleAutor Michal
19

Comme BosWorth99, j'aime aussi manipuler le dom éléments directement, ce qui permet de maintenir l'ensemble des attributs du nœud. Cependant, je voulais conserver la position de l'élément dans le dom et pas seulement ajouter de la fin en cas 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);
};
```
- Je suis sûr que c'est une mauvaise question, je ne suis pas familier avec javascript/requête comme le disent les CSS, mais pourquoi voudriez-vous définir cela comme une variable au lieu de le céder comme une fonction? par exemple,function wrap(toWrap, wrapper) {?
- En général, je les expressions de fonction au lieu de déclarations constante du style de codage et de simplifier de levage comportement. javascriptweblog.wordpress.com/2010/07/06/...
- Cela ne répond pas à la question. L'OP est de le vouloir pour l'emballage de tous les enfants, pas un seul élément.
InformationsquelleAutor user1767210
11

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/
- Vous pouvez tester votre réponse. Eu quelques bugs.
- Merci pour l'aide mais j'ai été prendre une hiérarchie DOM erreur
- Oui, il semble que l'ordre des opérations est tout. Devrait être corrigé maintenant.
- J'ai mis à jour le code, essayez-le maintenant.
- Yep, travaille maintenant. Vous pouvez simplifier un peu, si vous venez de gérer l'ajout de l'emballage extérieur de la boucle. Aussi, n'oubliez pas qu'un nœud DOM ne peut être que dans un endroit à la fois, de sorte que vous n'avez vraiment pas besoin de faire un removeChild puis un appendChild. Il suffit de faire la appendChild, et il va le retirer de son emplacement actuel. jsfiddle.net/GkEVm/3 ;o)
- Beaucoup plus propre, bien que ne sera pas la version modifiée d'erreur si pas d'éléments sont complétés par le " getElementsByclassName?
- Grand point. Mon chemin serait nécessaire d'ajouter un if( nodesToWrap[0] ).
- Quelqu'un aurait l'esprit expliquant le var addedToDocument = false?
- Le addedToDocument variable est juste un drapeau qui indique si oui ou non le wrapper élément a été ajouté au DOM. La raison pour cela est que 1) la position d'insertion de l'emballage div dépend de la correspondance des nœuds et que 2) il n'y a peut-être pas de nœuds appariés, auquel cas l'emballage ne doit pas être ajouté au DOM, et 3) lorsqu'il y a plusieurs nœuds appariés l'emballage doit être ajouté au DOM une fois, avant le premier match. Le drapeau s'assure juste que ces conditions sont respectées.
- Merci beaucoup Aroth.
InformationsquelleAutor aroth
7

J'aime manipuler des éléments du dom directement createElement appendChild, removeChild, etc. par opposition à l'injection de chaînes comme element.innerHTML. Cette stratégie fonctionne, mais je pense que le navigateur natif méthodes sont plus directes. En outre, ils retourne une nouvelle valeur du nœud, vous permet d'économiser à partir d'un autre inutile getElementById appel.

C'est vraiment simple, et aurait besoin d'être attaché à un certain type de l'événement pour en faire un usage quelconque.
```
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 aide votre compréhension de cette question à la vanille, avec js.
- Pourquoi cela doit-il être fixé? J'ai essayé de courir en attachant à une fonction nommée prepareSlideshow(), et en l'exécutant sur la charge, mais ne pouvez pas semblent être en mesure de modifier le DOM pour afficher le nœud requis
- Ci - joint- de sorte que vous avez le contrôle sur elle, comme l'événement onLoad de votre appel. Je veux dire, vous pourriez juste l'appeler trop, j'ai juste cru qu'il y avait un état dans lequel les lames n'étaient pas emballé, et vous avez besoin de faire modifier votre élément de la liste au cours de l'exécution. Il suffit d'exécuter sur n'importe quelle fonction, et aussi longtemps que votre id d'élément de noms de line-up, il doit travailler...
InformationsquelleAutor Bosworth99

Une bonne astuce pour essayer de faire quelque chose que vous auriez normalement faire avec jQuery, sans jQuery, est de regarder la source de jQuery. Que font-ils? Eh bien, ils saisissent tous les enfants, de les ajouter à un nœud, puis ajouter le nœud à l'intérieur de la mère.

Voici une petite méthode 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 l'utiliser:

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

InformationsquelleAutor Ansikt

De ce que je comprends @Michal 's réponse est vulnérables aux attaques XXS (en utilisant innerHTML est une faille de sécurité) Voici un autre lien sur le présent.

Il y a beaucoup de façons de le faire, un que j'ai trouvé et aimé, c'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, parfois, je veux juste envelopper les parties d'un élément. J'ai donc modifié la fonction de cette:

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 cette aide.

InformationsquelleAutor Will

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

InformationsquelleAutor viet nam

Vous devez vous connecter pour publier un commentaire.