Como adicionar uma imagem dinamicamente dentro desta div
com JavaScript ?
div class="toad" id="mushs">
<img id="image" src="mush.png">
</div>
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>
let
ou const
ao declarar variáveis... :)
Commented
22/02/2020 às 11:02
appendChild
e não sua imagem.
Commented
23/02/2020 às 23:47
Além do createElement
, demonstrado em outra resposta, há o construtor Image
, exclusivo para criar elementos img
— HTMLImageElement
.
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.