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 HTML

La 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 verdi
La 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.

PHP

Hvordan bruke PHP RAND -funksjon

RAND () -funksjonen i PHP kan brukes til å generere tilfeldige tall til forskjellige formål, for eks...

Oskar Fossum

PHP

Hvordan du bruker php str_split -funksjon

PHP Str_SPlit () -funksjonen er et nyttig verktøy for å dele opp strenger i individuelle tegn eller ...

Simen Ødegård

C programmering

if-ests-uttalelse i C-programmering

IF-Else-uttalelsen er et avgjørende konsept innen C-programmering som tillater beslutninger basert p...

Tobias Andresen