Discussion :

[fhbcrea]

Bonjour à tous.
Dans un CMS je peux créer mon script js, mais je ne peux pas importer JQUERY.
Ce que je souhaite
J'ai par exemple l'utilisateur qui à l'aide de interface wysiwyg génère le code suivant ou <a> peut-être présent n fois, pour exemple 2 fois :

Code html :

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

1
2
3
4
5
6
<a class="support_com" href="#" title="Affiche A3">
	<img src="monURL.fr/img/img1.jpg" alt=" alt texte" >
</a>
<a class="support_com" href="#" title="Flyer A5">
	<img src="monURL.fr/img/img2.jpg" alt=" alt texte" >
</a>

Et ce que je voudrais obtenir comme résultat, c'est celui-ci :

Code html :

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

1
2
3
4
5
6
7
8
<a class="support_com" href="#" title="Affiche A3">
	<img src="monURL.fr/img/img1.jpg" alt=" alt texte" >
	<p>Affiche A3</p>
</a>
<a class="support_com" href="#" title="Flyer A5">
	<img src="monURL.fr/img/img2.jpg" alt=" alt texte" >
	<p>Flyer A5</p>
</a>

2 choses :
On voit donc que dans le second code que la balise <p></p> est créée après la balise <img/> et que le texte est celui de l'attribut title de la balise parent <a>.
Je galère à faire ça, je n'obtiens rien de bon.
Pouvez-vous m'aider ?

merci beaucoup pour votre aide.

Yaolt

[SpaceFrog]

regarde du coté de

Code :

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

document.createElement()

et de

Code :

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

appendChild()

[fhbcrea]

Merci pour votre retour, mais je ne suis pas bon en javascript, je ne le pratique pas pour ainsi dire.
Une aide plus substantielle ne serait pas de refus ;-)

Merci à vous.
Frédéric

[SpaceFrog]

Il suffit de créer les élements, de leur affecter les bonnes propriétés et/ou attributs et de les imbriquer dans le bon ordre

Un petit exemple de ce à quoi ça pourrait ressembler:
https://jsfiddle.net/a37qwc4n/

A noter qu'il n'y a pas que cette façon de faire ...
On pourrait par exemplejuste générer le code html souhiater et le coller dans un conteneur ...

[fhbcrea]

Merci pour ce retour.
Alors en effet, à force de chercher les balises dont j'avais besoin, j'étais arrivé un peu près au même résultat.
J'utilisais getElementById plutôt que querySelector.
Merci pour cette démo.
Pour un objet, pas de problème, j'y arrive. Mais je n'arrive pas à créer de boucle.
L'utilisateur créé autant <a> qu'il le souhaite

Code html :

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

1
2
3
4
<a class="support_com" href="#" title="Affiche A3">
	<img src="monURL.fr/img/img1.jpg" alt=" alt texte" >
	<p>Affiche A3</p>
</a>

Comment boucler dessus, selon l'exemple donné précédemment avec n <a>?
Merci pour l'aide.

[SpaceFrog]

Fais une fonction qui englobe l'ajout ...
Tu pourras même lui passer des paramètres ( source d'image, href, texte ...)
https://jsfiddle.net/a37qwc4n/1/