Intégrer un document write à l'intérieur du code html

Bonjour,

Je souhaiterais intégrer une variable à l'intérieur d'une balise html pour en facilité la gestion (gros de volume/redondance), ne pouvant utiliser du php et mysql)

J'ouvre une lightbox à l'intérieur de laquelle je souhaiterais afficher les variables :

Code:

---

<a class="fancybox" href="#profil" title="Liste des profils"><img class="vignette" src="design/vignette.png" /></a>

---

puis la lightbox :

Code:

---

1 2 3 4 5 6 7 8 9

<div id="profil" style="width:400px;display: none;"> <span class="dispoprofil"><center>Disponible sur les profils suivants :</center></span> <div class="list-group"> <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-times"></i><span class="item">Profil 1</span></li></ul></a> <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-check"></i><span class="item">Profil 2</span></li></ul></a> <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-check"></i><span class="item">Profil 3</span></li></ul></a> <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-check"></i><span class="item">Profil 4</span></li></ul></a> ... </div>

---

L'idée serait de gérer la valeur de la classe <i> à partir d'une liste de variable

Code:

---

1 2 3

var dispo=new Array(2); dispo[0]="check"; dispo[1]="times";

---

pour générer :

Code:

---

<a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-<script>document.write(dispo[1]);</script>"></i><span class="item">Profil 1</span></li></ul></a>

---

Mais cela ne donne soit aucun résultat, la puce n'est plus visible.

Pourriez-vous m'orienter sur cette réalisation?
Merci par avance

Bonjour,
pour commencer il serait intéressant que tu lises Comprendre document.write() en JavaScript.

Bonjour,

Merci pour le lien qui m'a permis de me former un peu au javascript.

Après beaucoup de tâtonnements, je suis parvenue à récupérer ma variable dans mon code html grâce à un document.getElementById et un innerHTML (et sans étant vraiment certaine de comprendre ce que j'ai réalisé). Le code doit être pour vous très mauvais, il a le mérite de réaliser ce que je souhaite voir. J'en ai profité pour ajouter la variable du nom de la page pour générer mes list à partir du nom de page automatiquement.

Voici mon charabia :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script type="text/javascript">   var sPath = window.location.pathname; //var sPage = sPath.substring(sPath.lastIndexOf('\\') + 1); var sPage = sPath.substring(sPath.lastIndexOf('/') + 1); var page = sPage.replace(".html", "");   var dispo=new Array(2); dispo[0]="times"; dispo[1]="check";   var pga = "_profil1" var dispo_pga = page + pga var dispo_pga = (dispo[0]);   </script>   <div id="profil_orl" style="width:400px;display: none;"><script> document.getElementById("profil_orl").innerHTML = '<a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-' + dispo_pga + '"></i><span class="item">Profil 1</span></li></ul></a><a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-' + dispo_pga + '"></i><span class="item">Profil général</span></li></ul></a><a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-' + dispo_pga + '"></i><span class="item">Profil général</span></li></ul></a>'; </script> </div>

---

J'essaie maintenant d'améliorer l'aspect visuel du code. Est-il possible de cumuler les document.getElementById pour un confort de lecture ?

Genre :

Code:

---

1 2 3

document.getElementById("profil_orl").innerHTML = 'ma liste 1'; document.getElementById("profil_orl").innerHTML = 'ma liste 2'; document.getElementById("profil_orl").innerHTML = 'ma liste 3';

---

ou lieu de :

Code:

---

document.getElementById("profil_orl").innerHTML = 'ma liste 1' + 'ma liste 2' + 'ma liste 3';

---