Insert images dynamically with javascript

Question

I am developing a custom receiver for Chrome Cast. My sender sends me a picture to chromecast, precise positioning this image according to the coordinates sent by the sender.

index.html:

<div id="interacao" class="interacao">
    <h1 id="h1texto">Adicione suas mídias pelo celular!</h1>
    <video id="vdo"></video>
</div>

manipulacaoElemento.js:

function insertImg(element){
    elementoAInserir = document.createElement("img");
    elementoAInserir.id = element.idImg;
    elementoAInserir.src = element.url;
    elementoAInserir.style.width = element.widthImagem +'px';
    elementoAInserir.style.height = element.heightImagem +'px';
    elementoAInserir.style.left = element.posicao.x+'px';
    elementoAInserir.style.top = element.posicao.y+'px';
    $('.interacao').html(elementoAInserir);
}

The image is loaded, but not at the position that the sender sent, but instead at the position 0, 0. Could anyone help me solve this problem?

Answer 1

You are missing elementoAInserir.style.position = 'absolute';

function insertImg(element) {
  elementoAInserir = document.createElement("img");
  elementoAInserir.id = element.idImg;
  elementoAInserir.src = element.url;
  elementoAInserir.style.position = 'absolute';
  elementoAInserir.style.width = element.widthImagem + 'px';
  elementoAInserir.style.height = element.heightImagem + 'px';
  elementoAInserir.style.left = element.posicao.x + 'px';
  elementoAInserir.style.top = element.posicao.y + 'px';
  $('.interacao').html(elementoAInserir);
}

insertImg({
  idImg: '...',
  url: 'https://www.gravatar.com/avatar',
  widthImagem: 100,
  heightImagem: 100,
  posicao: {
    x: 100,
    y: 100
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="interacao" class="interacao">
  <h1 id="h1texto">Adicione suas mídias pelo celular!</h1>
  <video id="vdo"></video>
</div>