JavaScript és un dels llenguatges de programació més utilitzats. També és molt popular per la seva versatilitat a les plataformes. Hi ha diferents propietats a que us facilitin la tasca de construir un lloc web dinàmic. En aquest article, parlarem de l'HTML interior a JavaScript en la següent seqüència:
Introducció a JavaScript
JavaScript s’utilitza com a llenguatge de programació del costat del client i també com a llenguatge de programació del servidor. s'utilitza per executar tant al costat del client com del servidor de qualsevol aplicació. Un node també es pot anomenar Node.js en diversos llocs.
JavaScript proporciona una gran quantitat de mètodes per realitzar diverses funcionalitats amb facilitat. Això és el que va convertir JavaScript en un dels llenguatges de programació més populars, ja que també s’utilitza àmpliament en diversos tipus de desenvolupament de productes.
HTML interior a JavaScript
L’interior La propietat de JavaScript és una de les funcions molt útils i s’utilitza àmpliament per proporcionar un aspecte més dinàmic i versàtil a les pàgines web que es creen.
Si intentem explicar l'interiorHTML simplement, la feina feta per l'interiorHTML és simplement carregar el contingut de la pàgina sense actualitzar tota la pàgina. D’aquesta manera, s’estalvien els usos de les dades, així com el temps que queda darrere de la càrrega de la pàgina i és pràcticament fàcil d’obtenir. Això proporciona a l’usuari una sensació molt ràpida i sensible i, per tant, fa que l’experiència de l’usuari sigui molt millor.
Pot semblar una mica difícil, però intentem entendre-ho amb l’ajut d’un exemple.
c ++ passa a la línia
Exemple:
Feu clic aquí per canviar el text HTML interior.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Paràgraf canviat!' }
Aquí, al codi anterior, a l'etiqueta de paràgraf, l'identificador d'aquest és el paràgraf1.
Hi ha un funció anomenat myfunction () que es revocaria en fer clic al text 'Feu clic aquí per canviar el text innerHTML'.Quan es revoca la funció en fer clic, s'executa la funció que diu getElementById ('paràgraf1'), que indica que s'ha de seleccionar l'element amb l'ID com a demostració.
A més, tenim la funció innerHTML que simplement significa després de fer clic allò que s'ha de fer. Aquí, a l'exemple anterior, és simplement 'Paràgraf canviat'.
A continuació es mostra la sortida inicial del codi anterior.
A continuació es mostra la sortida modificada després del clic.
HTML interior amb llista ordenada o no ordenada
A continuació es mostra un exemple per mostrar l'ús de innerHTML amb una llista ordenada o no ordenada.
Exemple:
- Hola
- Hola de nou
Feu clic al botó següent per obtenir el contingut de l'element ul.
Funció de prova helloFunction () {var x = document.getElementById ('la meva llista'). InnerHTML document.getElementById ('paràgraf1'). InnerHTML = x}Aquí l'interiorHTML s'activa mitjançant el botó definit amb el nom 'Prova-ho'.
La sortida inicial del text anterior és:
La sortida després de fer clic al botó. El clic al botó no condueix a la recàrrega de la pàgina, sinó que es va deure a l’ús de innerHTML.
InnerHTML per canviar l'URL
A continuació es mostra un altre exemple que mostra l’ús d’internHTML per canviar l’URL al fer clic al botó.
Exemple:
Viquipèdia Canvia la funció d'enllaç myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}
L'exemple anterior dóna inicialment l'enllaç al lloc web de Wikipedia, però quan es fa clic al botó, l'enllaç canvia a Google.
Hi ha diverses operacions d’aquest tipus en què innerHTML resulta útil quan la pàgina no s’ha de tornar a carregar i només s’ha d’actualitzar una part.Això suposa un estalvi de temps i menys esforços per fer aquest enfocament.El major avantatge d’internHTML és l’experiència d’usuari que es millora amb aquesta funció.
Consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de 'Concatenació de cadenes en JavaScript' i us respondrem.