Hvordan legge til bilde i HTML via JavaScript

Mens du oppretter en webside eller et nettsted, kan det være et krav å legge til et bilde til et bestemt element. For eksempel skaper det å knytte et bilde med en handling. I slike situasjoner er det til å legge til bilder i HTML via JavaScript.

Denne bloggen vil diskutere prosedyren for å legge til et bilde i HTML via JavaScript.

Hvordan legge til et bilde i HTML ved hjelp av JavaScript?

Følgende metoder brukes til å legge til bilder i HTML -dokumenter ved hjelp av JavaScript:

• “vedlegg ()”Metode.
• “QuerySelector ()”Metode.

Metode 1: Legg til bilde i HTML -dokument via JavaScript ved hjelp av appendchild ()

“vedlegg ()”Metode legger til eller legger til elementet fra barneknuten i foreldroden. Denne metoden kan vise bildet slik at det spesifiserte bildet i JavaScript er vedlagt et element i HTML -koden.

Eksempel

La oss oversikt følgende eksempel:

Dette bildet blir lagt til ved å bruke JavaScript i HTML -dokument:

I ovennevnte kodebit:

• I HTML -filen, legg til en "<div> ”Element som har ID”myimg" innen <kropp> Tag.
• I neste trinn, bruk "CreateElement ()”Metode for å lage en elementnode som heter“img”.
• Etter det, “src”Attributt vil spesifisere banen til bildet.
• “getElementById ()”Metode, i neste trinn, vil få tilgang til den inkluderte“”Element av dets“id”.
• Til slutt "vedlegg ()”Metoden vil legge det spesifiserte bildet til det tilgangede elementet i forrige trinn.

Produksjon

Metode 2: Legg til bilde i HTML -dokument via JavaScript ved hjelp av QuerySelector ()

“QuerySelector ()”Metode får tilgang til et element basert på CSS -velgeren. Det kan også brukes for å få tilgang til HTML -elementet direkte og knytte et bilde ved å spesifisere det.

Eksempel

Det undergitte eksemplet illustrerer det uttalte konseptet:

Dette bildet er lagt til i HTML ved å bruke JavaScript:

I kodelinjene ovenfor:

• Inkluderer en overskrift og en "<img> ”Element, som sagt.
• I JavaScript -koden får tilgang til det inkluderte elementet som er opprettet i forrige trinn via "QuerySelector ()”Metode.
• Til slutt, bruk "src”Attributt til å inkludere et bilde via sti.

Produksjon

Det kan sees at bildet er lagt til "”Element i HTML via JavaScript.

Konklusjon

For å legge til et bilde i HTML ved hjelp av JavaScript, bruk "src”Attributt kombinert med“vedlegg ()" eller "QuerySelector ()”Metode. Den tidligere metoden legger bildet til et element i HTML ved hjelp av en opprettet node. Den sistnevnte metoden får tilgang til HTML -elementet direkte og knytter et bilde med det. Denne bloggen diskuterte prosedyren for å legge til bilder i HTML via JavaScript.