danielhagnoul

La méthode wrap existe en jQuery mais pas en Vanilla JS, je l'ai ajouté à mon fichier dvjhUtilities-1.8.4.js

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const kWrap = ({
        query = kRequiredParamVerbose({
            param: "query",
            type: "selector",
            info: "un sélecteur existant dans le DOM"
        }),
        tag = kRequiredParamVerbose({
            param: "tag",
            type: "tag",
            info: "un tag qui sera ajouté au DOM et qui emballera le sélecteur query"
        }),
        classe = 'maClasse'
    } = {}) => {
        document.querySelectorAll(query).forEach(elem => {
            const newElem = document.createElement(tag);
            elem.parentElement.insertBefore(newElem, elem);
            newElem.appendChild(elem);
 
            if (classe != 'maClasse') {
                newElem.classList.add(classe);
            }
        });
    };

Exemples

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>Block 1</div>
<div class="wrap_me">Block 2</div>
<div>Block 3</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.sectionColor {
  background-color: burlywood;
}
 
.changeColor {
  background-color: beige
  color: blue;
}

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{ // emballer chaque division dans une section
    kWrap({
        query: 'div',
        tag: 'section',
        classe: 'sectionColor'
    });
}
 
{ // emballer l'élément du DOM ayant la classe 'wrap_me' dans une division
    kWrap({
        query: '.wrap_me',
        tag: 'div',
        classe: 'changeColor'
    });
}

EDIT 2018-10-23

Un ID devant être unique dans la page web, il est impossible de donner un ID à chaque élément wrap !

Licence Creative Commons Attribution 2.0 Belgique