2

Como adicionar uma imagem dinamicamente dentro desta div com JavaScript ?

div class="toad" id="mushs">
    <img id="image" src="mush.png">
</div>

2 Respostas 2

4

Para criar elementos dinamicamente em JavaScript, basta utilizar a função createElement passando o nome da tag que deseja criar como argumento (no caso é a tag <img>).

Depois de ter criado o elemento de imagem, defina no atributo src o caminho da imagem e adicione o elemento que você criou dentro da div com o appendChild. Veja o exemplo abaixo:

function criaImagem(){
    const div = document.getElementById("imagens");
    
    const image = document.createElement("img");
    image.src = prompt("Digite o nome ou link da imagem: ");
    
    div.appendChild(image);
}
<div id="imagens"></div>
<button onclick="criaImagem();">Criar Imagem</button>

4
  • 4
    Não é bom esquecer de usar um let ou const ao declarar variáveis... :) Commented 22/02/2020 às 11:02
  • Costume de Python kkkk Commented 22/02/2020 às 15:47
  • Criei um botao para adicionar uma imagem usando teu codigo como apoio mas nao esta funcionando(a imagem esta na mesma pasta do arquivo js) function addImg() { const image = document.createElement('img'); image.src = 'mush.png'; document.getElementById('mushs').appendChild('image'); } Commented 23/02/2020 às 23:31
  • @DouglasKramer o problema é que você está passando uma string no método appendChild e não sua imagem. Commented 23/02/2020 às 23:47
4

Além do createElement, demonstrado em outra resposta, há o construtor Image, exclusivo para criar elementos imgHTMLImageElement.

const button = document.querySelector('button');
button.addEventListener('click', appendImage);

function appendImage() {
  const div = document.querySelector('#images');
    
  const image = new Image(200, 200); // Largura (width) e altura (height).
  image.src = 'https://i.sstatic.net/KPUgS.png';
    
  div.appendChild(image);
}
<button>Criar Imagem</button>
<div id="images"></div>

O construtor Image é similar à API document.createElement('img'), porém aceita como argumentos a largura e altura da imagem.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .