Come aggiungere l'immagine in HTML tramite JavaScript

Durante la creazione di una pagina Web o di un sito, può esserci un requisito per aggiungere un'immagine a un particolare elemento. Ad esempio, associare un'immagine a un'azione crea effetti. In tali situazioni, l'aggiunta di immagini in HTML tramite JavaScript è di grande aiuto nell'integrazione di più elementi, facendo risaltare il sito.

Questo blog discuterà della procedura per aggiungere un'immagine in HTML tramite JavaScript.

Come aggiungere un'immagine in HTML usando JavaScript?

I seguenti metodi vengono utilizzati per aggiungere immagini nei documenti HTML usando JavaScript:

• "appendChild ()" metodo.
• "QuerySelector ()" metodo.

Metodo 1: Aggiungi immagine nel documento HTML tramite JavaScript usando AppendChild ()

IL "appendChild ()"Il metodo aggiunge o aggiunge l'elemento dal nodo figlio nel nodo genitore. Questo metodo può visualizzare l'immagine in modo tale che l'immagine specificata in JavaScript sia aggiunta a un elemento nel codice HTML.

Esempio

Panoramiamo il seguente esempio:

Questa immagine viene aggiunta utilizzando JavaScript nel documento HTML:

Nel frammento di codice sopra:

• All'interno del file HTML, aggiungi un "<div> "Elemento con l'ID"myimg"All'interno del <corpo> tag.
• Nel passaggio successivo, applica il "createElement ()"Metodo per creare un nodo elemento chiamato"img".
• Dopodiché, il "src"L'attributo specificherà il percorso dell'immagine.
• IL "getElementById ()"Metodo, nel passaggio successivo, accederà all'incluso""Elemento per il suo"id".
• Infine, il "appendChild ()"Il metodo aggiungerà l'immagine specificata all'elemento accessibile nel passaggio precedente.

Produzione

Metodo 2: Aggiungi immagine nel documento HTML tramite JavaScript usando QuerySelector ()

IL "QuerySelector ()"Il metodo accede a un elemento basato sul selettore CSS. Può anche essere applicato per accedere direttamente all'elemento HTML e associare un'immagine specificandola.

Esempio

L'esempio seguente illustra il concetto dichiarato:

Questa immagine viene aggiunta in HTML usando JavaScript:

Nelle righe di codice sopra:

• Includere un'intestazione e un "<img> "Elemento, come indicato.
• Nel codice JavaScript, accedi all'elemento incluso creato nel passaggio precedente tramite "QuerySelector ()" metodo.
• Infine, applica il "src"Attributo per includere un'immagine tramite percorso.

Produzione

Si può vedere che l'immagine è allegata a ""Elemento in HTML tramite JavaScript.

Conclusione

Per aggiungere un'immagine in HTML usando JavaScript, applica il “src"Attributo combinato con il"appendChild ()" o il "QuerySelector ()" metodo. Il precedente metodo aggiunge l'immagine a un elemento in HTML con l'aiuto di un nodo creato. Quest'ultimo metodo accede direttamente all'elemento HTML e associa un'immagine. Questo blog ha discusso della procedura per aggiungere immagini in HTML tramite JavaScript.