Insérer un élément dans un autre grace à jquery

Voici un petit exemple tout simple en jQuery pour ajoter un élement <span></span> dans un titre.Voici un exemple concret.

On a par exemple un titre h1


<br />
<h1 class="highlight">blabla</h1>
<p>

ce titre on voudrait l’entourer de deux lignes latérales pour l’enjoliver:

titre

Comme les titres sont générés automatiquement par wordpress, on ne peut pas intervenir sur le code html lui même.

Soit on cible un niveau de titre dans une div particulière, par exemple:

jQuery(document).ready(function(){
    jQuery(".page-id-100 .content h3").wrapInner("<span></span>");
    });

Ici on cible les titres h3 de la div .content dans la page qui contient l’id 100.

Soit on ajoute une classe aux titres, ici pour l’exemple la classe highlight, on peut le faire en jQuery avec un addClass par exemple, et ensuite on cible tous les titres ayant la classe « highlight » et avec un wrapInner, on insère entre les balises <h1></h1> ou <h2></h2> etc, des balises span

jQuery(document).ready(function(){
    jQuery(".highlight").wrapInner("<span></span>");
    });

Ensuite on applique le css necessaire pour afficher dynamiquement les deux tirets autour du titre.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.