JavaScript est l'un des langages de programmation les plus utilisés. Il est également très populaire pour sa polyvalence sur les plates-formes. Il existe différentes propriétés dans qui facilitent votre travail de création d'un site Web dynamique. Dans cet article, nous aborderons le code HTML interne en JavaScript dans l'ordre suivant:
différence entre la classe et l'interface en java
Introduction à JavaScript
JavaScript est utilisé comme langage de programmation côté client ainsi que comme langage de programmation côté serveur. est utilisé pour exécuter du côté client ainsi que du côté serveur de toute application. Un nœud peut également être appelé Node.js à plusieurs endroits.
JavaScript fournit une pléthore de méthodes pour plusieurs fonctionnalités à exécuter avec facilité. C'est ce qui a fait de JavaScript l'un des langages de programmation les plus populaires et qu'il est également largement utilisé dans plusieurs types de développement de produits.
HTML interne en JavaScript
L'intérieur La propriété en JavaScript est l'une des fonctionnalités très pratiques et est largement utilisée pour donner un aspect plus dynamique et polyvalent aux pages Web en cours de création.
Si nous essayons d'expliquer simplement le innerHTML, le travail effectué par le innerHTML consiste simplement à charger le contenu de la page sans rafraîchir la page entière. Cela économise les utilisations des données ainsi que le temps de chargement de la page et est assez facile à gagner. Cela donne à l'utilisateur une sensation très rapide et réactive, améliorant ainsi l'expérience utilisateur.
Cela peut sembler un peu difficile, mais essayons de comprendre cela à l’aide d’un exemple.
Exemple:
Cliquez ici pour changer le texte innerHTML.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Paragraphe changé!' }
Ici, dans le code ci-dessus, dans la balise de paragraphe, l'identifiant est paragraphe1.
Il y a un fonction nommée myfunction () qui serait révoquée en cliquant sur le texte «Cliquez ici pour changer le texte innerHTML».Lorsque la fonction est révoquée sur le clic, la fonction est exécutée qui dit getElementById («paragraphe1»), qui a déclaré que l'élément avec l'ID comme une démo doit être sélectionné.
De plus, nous avons la fonction innerHTML qui signifie simplement après le clic ce qu'il faut faire. Ici, dans l'exemple ci-dessus, il s'agit simplement de «paragraphe modifié».
Vous trouverez ci-dessous la sortie initiale du code ci-dessus.
Vous trouverez ci-dessous la sortie modifiée après le clic.
HTML interne avec liste ordonnée ou non
Vous trouverez ci-dessous un exemple pour montrer l'utilisation de innerHTML avec une liste ordonnée ou non.
Exemple:
java comment utiliser tostring
- Bonjour
- Rebonjour
Cliquez sur le bouton ci-dessous pour obtenir le contenu de l'élément ul.
Essayez la fonction helloFunction () {var x = document.getElementById ('maListe'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}Ici, le innerHTML est déclenché par le bouton défini par le nom «Try it».
La sortie initiale du texte ci-dessus est:
La sortie après le clic sur le bouton. Le clic sur le bouton n’entraîne pas le rechargement de la page mais est dû à l’utilisation de innerHTML.
qu'est-ce qu'un mot réservé en java
InnerHTML pour changer l'URL
Vous trouverez ci-dessous un autre exemple qui montre l'utilisation de innerHTML pour modifier l'URL lors du clic sur le bouton.
Exemple:
Wikipédia Modifier la fonction de lien myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}
L'exemple ci-dessus donne initialement le lien vers le site Web de Wikipédia, mais lorsque vous cliquez sur le bouton, le lien devient Google.
Il existe plusieurs opérations de ce type où innerHTML est pratique lorsque la page ne doit pas être rechargée et que seule une partie doit être mise à jour.Cela permet de gagner du temps et de réduire les efforts à faire pour l'approche.Le plus grand avantage de innerHTML est l'expérience utilisateur qui est améliorée avec cette fonctionnalité.
Vérifiez par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «Concaténation de chaînes en JavaScript» et nous vous répondrons.