Balise html dans code javascript
Résolu
oto_5019
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
cs_PaTaTe Messages postés 2126 Date d'inscription Statut Contributeur Dernière intervention -
cs_PaTaTe Messages postés 2126 Date d'inscription Statut Contributeur Dernière intervention -
A voir également:
- Balise html dans code javascript
- Code ascii - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Editeur html - Télécharger - HTML
4 réponses
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);
}
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
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)
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>
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 .