First change the value in Math.random()
from 3
to 4
, so the value generated will be 0
to 3
, which will be the reference to get id
of div
s.
Then you can clone the img
element of the ball and make a appendChild
. I've also created a bolid
variable that is incremented each clone to generate a single id
for each new image, since id
must be unique on the page :
var bol = document.getElementById("bola");
var x = document.getElementsByClassName("interna");
var bolid = 0; // variável para gerar ids
bol.ondblclick = function(){
var I = parseInt(Math.random()*4);
var clone = bol.cloneNode();
clone.id += bolid++; // atribuir um id único
document.getElementById("div"+(I+1)).appendChild(clone);
};
<div id="princ">
<div class="princ" id="header"></div>
<div id="div1" class="interna">DIV 1</div>
<div id="div2" class="interna">DIV 2</div>
<div id="div3" class="interna">DIV 3</div>
<div id="div4" class="interna">DIV 4</div>
TEXTO:<input type="text" id="txtTeste">
<input type="button" id="btOk" value="ok"><br>
COR DE FUNDO:<input type="color" id="clrCor">
<div id="divBola"><img height="50" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"alt="bola" id="bola">
</div>
<div id="rodape">Rodapé</div>
</div>