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
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
A voir également:
- Balise html dans code javascript
- Code asci - Guide
- Code puk bloqué - Guide
- Telecharger javascript - Télécharger - Langages
- Code telephone oublié - Guide
- Editeur html - Télécharger - HTML
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
496
28 janv. 2020 à 19:54
28 janv. 2020 à 19:54
Bonjour,
Une piste pour créer des liens dans une boucle :
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);
}
cs_PaTaTe
Messages postés
2126
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
496
28 janv. 2020 à 19:59
28 janv. 2020 à 19:59
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:
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
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é)
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
(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
2126
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
496
>
Gramercy
1 févr. 2020 à 16:56
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
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)
"
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
2126
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
496
>
Gramercy
7 févr. 2020 à 13:59
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>
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
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.
28 janv. 2020 à 19:57
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 .