Insérer un élément div en tant que parent

Je me demandais simplement si celui-ci est possible, permet de dire que nous avons un élément du dom, et nous voulons nous envelopper de cet élément dans un div. Donc une div est inséré entre l'élément et celle du parent. Puis la div devient l'élément parent.

Mais pour compliquer les choses, d'ailleurs nous avons déjà fait des choses comme:

var testElement = document.getElementByID('testID')

où testID est un enfant de l'élément à warapped dans un div. Ainsi, après nous avons fait de notre insertion testElement-ils toujours valides?

BTW: je ne suis pas à l'aide de jquery.

Des idées?

Merci,

AJ

source d'informationauteur AJ.

  1. 43

    Vous pouvez utiliser replaceChild [docs]:

    //`element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');

//set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
//set element as child of wrapper
wrapper.appendChild(element);

    Aussi longtemps que vous n'êtes pas à l'aide de innerHTML (qui détruit et crée des éléments), de références à des éléments du DOM ne sont pas modifiés.

  2. 2

    Voici un autre exemple, seul le nouvel élément s'enroule autour de "tout" de ses éléments enfant.

    Vous pouvez changer cela comme nécessaire de les envelopper dans différentes gammes. Il n'y a pas beaucoup de commentaire sur ce sujet précis, donc j'espère qu'il sera utile à tout le monde!

    var newChildNodes = document.body.childNodes;  
var newElement = document.createElement('div');

newElement.className = 'green_gradient';
newElement.id = 'content';        

for (var i = 0; i < newChildNodes.length;i++) {
    newElement.appendChild(newChildNodes.item(i));
    newChildNodes.item(0).parentNode.insertBefore(newElement, newChildNodes.item(i));
}

    Vous souhaitez modifier le document.corps de l'newChildNodes variable quel que soit le parent de votre nouvel élément sera. Dans cet exemple, j'ai choisi d'insérer un wrapper div. Vous aurez également besoin de mettre à jour le type de l'élément, et l'id et le nom de la classe de valeurs.

  3. 1

    En supposant que vous faites de votre manipulation standard en utilisant les méthodes du DOM (et pas innerHTML) alors — oui.

    Éléments mobiles sur ne casse pas des références directes à eux.

    (Si vous avez été en utilisant innerHTML, alors vous seriez en détruisant le contenu de l'élément configuration de la propriété et, ensuite, la création de nouveaux contenus)

    Vous voulez probablement quelque chose comme:

    var oldParent = document.getElementById('foo');
var oldChild = document.getElementById('bar');
var wrapper = document.createElement('div');
oldParent.appendChild(wrapper);
wrapper.appendChild(oldChild);
  4. 1

    En pur JS vous pouvez essayer quelque chose comme cela... 

    var wrapper = document.createElement('div'); 
var myDiv = document.getElementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv);