Dynamically add images with Javascript

Question

How to add an image dynamically inside this div javascript ?

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

Answer 1

Beyond the createElement, demonstrated in another answer, there’s the builder Image, unique to create elements 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.stack.imgur.com/KPUgS.png';
    
  div.appendChild(image);
}

<button>Criar Imagem</button>
<div id="images"></div>

The builder Image is similar to API document.createElement('img'), but accepts as arguments the width and height of the image.

Answer 2

To create elements dynamically in Javascript, just use the function createelement passing the name of the tag you want to create as argument (in this case it is the tag <img>).

After you have created the image element, set in the attribute src the image path and add the element you created inside the div with the appendchild. See the example below:

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>