Como adicionar imagem em html via javascript

Ao criar uma página ou site da web, pode haver um requisito para anexar uma imagem a um determinado elemento. Por exemplo, associar uma imagem a uma ação cria efeitos. Em tais situações, a adição de imagens em HTML via JavaScript é de grande ajuda na integração de vários elementos, fazendo com que o site se destaque.

Este blog discutirá o procedimento para adicionar uma imagem em html via javascript.

Como adicionar uma imagem em html usando javascript?

Os seguintes métodos são usados ​​para adicionar imagens em documentos HTML usando JavaScript:

• ““ApndendChild ()”Método.
• ““QuerySelector ()”Método.

Método 1: Adicione a imagem no documento HTML via JavaScript usando AppendChild ()

O "ApndendChild ()”O método adiciona ou anexa o elemento do nó filho no nó pai. Este método pode exibir a imagem de modo que a imagem especificada no JavaScript seja anexada a um elemento no código HTML.

Exemplo

Vamos ver o exemplo a seguir:

Esta imagem é adicionada usando JavaScript no documento HTML:

No trecho de código acima:

• Dentro do arquivo html, adicione um “<div> "Elemento tendo o id"myimg" dentro do <corpo> tag.
• Na próxima etapa, aplique o “createElement ()”Método para criar um nó de elemento chamado“img”.
• Depois disso, o “src”O atributo especificará o caminho da imagem.
• O "getElementById ()”O método, na próxima etapa, acessará o incluído“”Elemento por seu“eu ia”.
• Por fim, o “ApndendChild ()”Método anexará a imagem especificada ao elemento acessado na etapa anterior.

Saída

Método 2: Adicione a imagem no documento HTML via javascript usando queryselector ()

O "QuerySelector ()”Método acessa um elemento baseado no seletor CSS. Também pode ser aplicado para acessar o elemento HTML diretamente e associar uma imagem especificando -a.

Exemplo

O exemplo abaixo do rumo ilustra o conceito declarado:

Esta imagem é adicionada no HTML usando JavaScript:

Nas linhas acima do código:

• Inclua um título e um “<img> ”Elemento, conforme declarado.
• No código JavaScript, acesse o elemento incluído criado na etapa anterior através do “QuerySelector ()”Método.
• Finalmente, aplique o “src”Atributo para incluir uma imagem via caminho.

Saída

Pode -se observar que a imagem é anexada ao “”Elemento em HTML via JavaScript.

Conclusão

Para adicionar uma imagem em html usando JavaScript, aplique o “srcAtributo combinado com o “ApndendChild ()" ou o "QuerySelector ()”Método. O método anterior anexa a imagem a um elemento em HTML com a ajuda de um nó criado. O último método acessa o elemento HTML diretamente e associa uma imagem a ele. Este blog discutiu o procedimento para adicionar imagens em html via javascript.