Cloner des éléments

On va essayer de modifier les liens présents dans une page afin de créer dynamiquement des variantes.

Pour cela, on commence par lister les liens qui nous intéressent (ici ceux ayant le titre « perdu ») :

Pour chacun d’eux, on applique une fonction qui va nous permettre de les tripoter tranquillement : .each(function(i){ ... });

C’est maintenant que ça se complique : on va cloner ce nœud avec this.cloneNode(true), et placer le clone avant le nœud lui-même par $(this).before(this.cloneNode(true))

Notez l’utilisation de $(this) ou de this selon le contexte : dans un cas on est en pur javascript : this.cloneNode(true) ; dans l’autre en jquery : $(this).before(...).

Comme la plupart les fonctions de jquery retournent l’objet sur lequel elles viennent de travailler, on peut ajouter à la même ligne une commande qui va donc agir sur l’original : ici, on ajoute un argument à l’url : .attr("href", this.href+"?ici")

On se retrouve donc avec une copie du lien original, suivie du lien original avec une URL modifiée.

On pourrait utiliser ce système pour créer des URLs adaptées (par exemple, pour des liens vers d’éventuelles traductions d’un article), ou pour choisir entre l’ouverture dans une nouvelle fenêtre ou dans la fenêtre courante.

Voici donc le résultat final :

À noter, une particularité de la fonction javascript cloneNode : si on lui passe l’argument false, le nœud est cloné sans son contenu (.innerHTML) ; avec la séquence

$(this.cloneNode(false)).html('*')

on récupère donc notre lien, mais avec un contenu égal à ’*’. Ce qui donne une version alternative du script, également attachée à cet article.