Tuto Jquery

Entourer un block html avec Jquery

Comment entourer un block HTML avec Jquery? Il est parfois utile dans un programme de pouvoir entourer un ou plusieurs éléments du dom avec une balise html. La méthode wrap() et ses variantes permettent de faire ce type d'actions.

Entourer une balise HTML avec Jquery

<span class="dalton">Jack</span>
<span class="dalton">Averell</span>
<script>
    $('.dalton').wrap('<h3></h3>');
</script>

<!--Affiche:-->
<h3><span class="dalton">Jack</span></h3>
<h3><span class="dalton">Averell</span></h3>

Entourer le contenu d'une balise HTML avec Jquery

<span class="dalton">Jack</span>
<span class="dalton">Averell</span>
<script>
    $('.dalton').wrapInner('<h3></h3>');
</script>

<!--Affiche:-->
<span class="dalton"><h3>Jack</h3></span>
<span class="dalton"><h3>Averell</h3></span>

Regrouper des éléments HTML avec Jquery

<span class="dalton">Jack</span>
<span class="lucky">Lucky Luke</span>
<span class="dalton">Averell</span>
<script>
    $('.dalton').wrapInner('<h3></h3>');
</script>

<!--Affiche: (regroupe les éléments ".dalton" et exclu l'élément ".lucky")-->
<h3>
    <span class="dalton">Jack</span>
    <span class="dalton">Averell</span>
</h3>
<span class="lucky">Lucky Luke</span>