Balise html dans code javascript

Résolu/Fermé
oto_5019 Messages postés 5 Date d'inscription mardi 28 janvier 2020 Statut Membre Dernière intervention 7 février 2020 - Modifié le 28 janv. 2020 à 18:31
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 - 7 févr. 2020 à 13:59
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.
A voir également:

4 réponses

cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 19:54
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);
}

0
oto_5019 Messages postés 5 Date d'inscription mardi 28 janvier 2020 Statut Membre Dernière intervention 7 février 2020 1
28 janv. 2020 à 19:57
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 .
0
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
28 janv. 2020 à 19:59
Pas de soucis ^^
0
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
0
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
0
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493 > Gramercy
1 févr. 2020 à 16:56
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
0
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)
0
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493 > Gramercy
7 févr. 2020 à 13:59
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>
0
oto_5019 Messages postés 5 Date d'inscription mardi 28 janvier 2020 Statut Membre Dernière intervention 7 février 2020 1
7 févr. 2020 à 12:43
Merci à tous et désolé de pas avoir pu répondre dernierement j'ai pu trouver je met ce sujet en resolu.
0