Hvordan endre HTML -elementets innhold i JavaScript
HTML -akronym av hypertekst Markus Språk brukes til å lage struktur på websider du ser på internett hver dag. I mellomtiden er JavaScript et kjent skriptspråk som brukes til å utføre dynamiske operasjoner på websider for å gjøre dem mer interaktive.
En interessant HTML -funksjon er HTML DOM -kort for dokumentobjektmodell. Det er et programmerings -API for HTML- og XML -dokumenter. Det brukes i utgangspunktet til å gi en logisk struktur til dokumentene. Det definerer hvordan et HTML -dokument kan vurderes og manipuleres. Det tillater JavaScript å endre innholdet i HTML -elementer.
I denne oppskrivningen vil vi diskutere:
- Endre innholdet i HTML -elementer ved hjelp av JavaScript
- Endre HTML -attributtverdi ved hjelp av JavaScript
- Bruk av dokumentet.Skriv () Metode
Endre innholdet i HTML -elementer ved hjelp av JavaScript
Innerhtml -egenskapen er den raskeste tilnærmingen for å endre innholdet i HTML -elementer. Det forklarte i detalj nedenfor:
Innerhtml eiendom
Innerhtml -egenskapen endrer innholdet i et HTML -element. For å bruke denne metoden, bruk følgende syntaks.
Syntaks for å bruke Innerhtml
dokument.getElementById (ID).InnerHTML = Ny HTMLLa oss demonstrere innerhtml -egenskapen med et eksempel.
Eksempel 1
Dette er et avsnitt
Ovennevnte avsnitt ble endret av InnerHTML -eiendommen
I eksemplet ovenfor manipulerer vi
element ved å bruke JavaScript Innerhtml -eiendommen. Avsnittet har en ID = ”para1”. HTML DOM bruker denne IDen for å få det aktuelle elementet og deretter endre innholdet i
Tag ved hjelp av Innerhtml -eiendommen. På denne måten blir det gamle avsnittet overskrevet av det nye avsnittet. Utgangen fra eksemplet ovenfor er som følger:
Vi kan også endre elementene ved hjelp av denne metoden. Lar oss gjøre et eksempel der den indre egenskapen endrer
element ved å bruke IDen.
Eksempel 2
La oss endre denne overskriften
Den gamle overskriften er endret
I eksemplet ovenfor bruker HTML DOM ID = ”Head2" for å få
Element og den indre HTML -egenskapen endrer innholdet i elementet. Utgangen er som følger.
La oss nå diskutere hvordan vi kan endre verdien av et HTML -attributt ved hjelp av JavaScript.
Endre attributtverdi
Ved å bruke attributtnavnet kan vi endre verdien av HTML -attributtet.
Syntaks
Syntaksen er vist nedenfor:
dokument.getElementById (ID).attributt = ny verdiLa oss demonstrere syntaks ovenfor ved hjelp av et passende eksempel.
Hundbildet blir endret til kattebilde
I eksemplet ovenfor får HTML DOM IMG -elementet av ID = ”Image1" så JavaScript SRC -attributtsjager fra en Dogpic.jpg til en catpic.jpg.
Går videre til den siste metoden som er dokument.Skriv () Metode.
dokument.skrive()
dokument.skriv () brukes til å skrive HTML -uttrykk eller JavaScript -kode direkte inn i HTML -utgangsstrømmen. Det vil overskrive dokumentet hvis du bruker denne metoden etter å ha lastet inn HTML -dokumentet. La oss prøve et eksempel.
Dette er et avsnitt
Dette er et annet avsnitt
I eksemplet ovenfor, dokumentet.skriv () -metoden viser høyden på vindusskjermen som utgang.
Konklusjon
HTML DOM gir visse egenskaper som lar JavaScript endre innholdet i HTML -elementer. For å endre innholdet i HTML -elementer, brukes innerml () -egenskapen. Du kan også endre attributtverdien til HTML -elementer ved å bruke attributtnavnet direkte. I mellomtiden dokumentet.Skriv () egenskap brukes til å skrive HTML -uttrykk eller JavaScript -kode direkte i HTML -utgangsstrømmen. Denne artikkelen diskuterer disse egenskapene i detalj med relevante eksempler.