Hvordan legge til bilde 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.