Balise html dans code javascript [Résolu]

Signaler
Messages postés
4
Date d'inscription
mardi 28 janvier 2020
Statut
Membre
Dernière intervention
7 février 2020
-
cs_PaTaTe
Messages postés
2072
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
-
Bonjour à tous ,
je suis en ce moment sur une partie de mon codage qui insère du script javascript dans une page html et je souhaite créer des liens.

L'idée serait de créer des liens entre des pages sans avoir à écrire à chaque fois <a href=" "> </a>grâce à une boucle for dans le script js:

En simple, ça donnerait visuellement ça en bas de page:

1-2-3-...-28-29-30
avec chaque numéro n étant un lien vers la page n.

en html:

<a href="localost\page-n">n-<a>

j'aimerais pouvoir faire cela avec javascript sans repéter 30 fois le <a href> et avec le n qui change grâce à la boucle for.

j'ai vu qu'il y avait des moyens de manipuler des baliser html avec js

(document.getElementById() ,document.getElementByName() etc..) et c'est ce que je souhaite faire.

Un grand merci en avance.
Et Bonne journée.

4 réponses

Messages postés
2072
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
202
Bonjour,

Une piste pour créer des liens dans une boucle :


for (let i = 0; i < 30; i++) {
let lien = document.createElement('a');
lien.setAttribute('href', 'lien' + i);
lien.innerHTML = 'Lien ' + i + '<br>';
document.body.append(lien);
}

oto_5019
Messages postés
4
Date d'inscription
mardi 28 janvier 2020
Statut
Membre
Dernière intervention
7 février 2020

Merci bcp jvais partir de ca et puis ça me permet de decouvrir de nouvelles choses c'est tjrs bon.
Je ne ferme pas encore le sujet le temps de m'approprier les fonctions proposées et j'essaierais de faire un retour d'exp.
Bonne soirée à toi .
Messages postés
2072
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
202
Pas de soucis ^^
Yo,
la méthode avec innerHTML est la pls imple et rapide mais vous avez aussi les fonctions createElement et appendChild qui sont des vrais fonctions et peuvent être plus pratique dans le cas d'automatisation (et sa réutilisation) que d'écrire à la main, par exemple:

function newLink(href, texte){
let myLink=document.createElement('a');/** nouveau lien 'a' dans le DOM mais n'est pas sur la page*/
myLink.href=href;
mylink.innerHTML=texte;
/** notez qu'on peut très bien mettre du HTML comme une image si on veut une image cliquable*/
return myLink;//-- retourne le lien 
}


function ajoutPage(tag, destinataire){
destinataire.appendChild(tag);
return tag;//-- on sais jamais si on veut intervenir à nouveau dessus
}
//utiliser ici conjointement:
//---il suffit d'utiliser/remplir la variable de type tableau et ça roule tout seul
 let listURL=['http.truc.html', 'http.machin.html'];

let dest=document.body;//-- là j'ai mis body comme destinataire il suffit de le changer 
for(let i=0; i<listURL.length;i++){
let verif= ajoutPage( newlink(listURL[i], i ), dest);
/* des fonctions imbriquées les unes aux autres = meilleur code, plus rapide à lire et exécuter et on peut modifier ou rajouter des fonctions à volonté// voir aussi programmation fonctionnelle
*/
console.log('ce '+verif+' lien  est ajouté');/** supprimer cette ligne qui est juste pour test en temps réel l'ajout des balises 'a' */
}

voilà j'espére que vous comprenez l'avantage pratique(pas toujours utile mais optimise le programme en tout cas) que peut avoir cette utilisation par rapport à simplement écrire directement le html, déjà c'est plus rapide à écrire je trouve mais surtout plus modulaire et modifiable tellement plus facilement(dès qu'on veut changer quelque chose ou utiliser une base de données pour les liens ça prend toute sa valeur ce type d'écriture)

https://developer.mozilla.org/fr/docs/Web/API/Document/createElement
https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild
A je n'avais pas regardé assez le code de cs_patate!
(notez que append c'est du JQuery et qu'on peut très bien s'en passer en utilisant appendChild)

Il est intermédiaire entre le mien et celui qui n'utilise que innerHTML(et incomplet puisque l'URL du lien 'href' n'est définit nulle part ) voici le plus simple (mais moins optimisé)

let listeURL=['...', '..', etc...];//-- à compléter par les vrais URL bien sûr
let texteHTMLaAjouter='';//-- une chaîne de caractère vide
for (let i = 0; i < 30; i++) {
texteHTMLaAjouter+='<a href='+listeURL[i]'>'+i+'</a>';
}
document.body.innerHTML=texteHTMLaAjouter;//-- on insére juste la liste des liens écrit en texte HTML
/** la variable ressemble à ça : "<a href=http/truc.html>1</a><a href=http/machin.html>2</a>...etc 30 fois
*/


Dans les 2 cas j'utilise un tableau mais on peut très bien adapté ça à la notation JSon (plus pratique si on veut autre chose que 1, 2 ... poiur le texte des liens) ou une variable de type Map:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
cs_PaTaTe
Messages postés
2072
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
202 > Gramercy
append n'est pas du jQuery (que je n'utilise pas, j'estime que c'est une librairie pour fainéant :P). Source : https://developer.mozilla.org/fr/docs/Web/API/ParentNode/append
Ah dernière chose:
"
j'ai vu qu'il y avait des moyens de manipuler des baliser html avec js

(document.getElementById() ,document.getElementByName() etc..) et c'est ce que je souhaite faire.
"

get = getter (ou accesseur en français) c'est pas pour modifier mais pour "cibler"/"sélectionner" un ou plusieurs éléments(un ave c une Id puisque unique, avec le name sélectionne toutes les balises dans un tableau de variables qui ont le même attribut name; moins intéressant que .getByTagName)
cs_PaTaTe
Messages postés
2072
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
202 > Gramercy
oui on peut manipuler le HTML en JS mais on utilisera document.createElement(), exemple :

<div id="contenu"></div>

<script>
    let monLien = document.createElement('a');
    monLien.href = 'https://www.google.fr/';
    monLien.title = 'Google';
    monLien.innerHTML = 'Accéder à Google';
    document.getElementById('contenu').appendChild(monLien);
</script>
Messages postés
4
Date d'inscription
mardi 28 janvier 2020
Statut
Membre
Dernière intervention
7 février 2020

Merci à tous et désolé de pas avoir pu répondre dernierement j'ai pu trouver je met ce sujet en resolu.