How to create HTML elements with Javascript?

Question

I have the following code Jsfiddle

It creates a div that gives to insert information and that when calling the contextmenu with the direct button opens a box to insert an image.

My question is:

How do I make him create the tag <image> dynamically at the time I select to insert the image, without jquery or any pure javascript-only plugin?

In part:

<div class="div-text" oncontextmenu="contextMenu(); return false;" contentEditable="true">
       <img src="" height="200" alt="Visualisar...">        
</div>

Edited:

Next I made a new one, now I can create a new element as soon as I right click, here is the example:

Jsfiddle

Answer 1

You cannot read the file name directly, but you can create a virtual path via API URL.createObjectURL which the browser supports. In that case it would look like this:

function previewFile() {
    var preview = document.querySelector('img');
    var file = document.querySelector('input[type=file]').files[0];
    var caminhoVirtual = URL.createObjectURL(file);
    preview.src = caminhoVirtual;
}

jsFiddle: https://jsfiddle.net/4qf4o21x/

or simply URL.createObjectURL(event.target.files[0]); thus: https://jsfiddle.net/4qf4o21x/1/

Answer 2

Wagner, create elements following some template, I advise you to use the tag .

in the example below I will clone a div.bloco and update its contents.

var tmplBloco = document.getElementById("tmplBloco").content;
var addBloco = document.getElementById("addBloco");
var contador = 1;

addBloco.addEventListener("click", function (event) {
  //criando fragmento.
  var content = document.importNode(tmplBloco, true);
  //procurando a div.bloco dentro do fragmento.
  var bloco = content.querySelector(".bloco");
  bloco.textContent = contador++;
  //adicionando o fragmento a pagina.
  document.body.appendChild(content);
});

.bloco {
  float: left;
  width: 32px;
  height: 32px;
  padding: 16px;
  line-height: 32px;
  font-size: 32px;
  text-align: center;
  margin: 10px;
  box-shadow: 0px 0px 10px black;
  background-color: white;
}

<input id="addBloco" type="button" value="adicionar bloco" />
<hr />
<template id="tmplBloco">
  <div class="bloco"></div>
</template>

Answer 3

It would look like this in a simplified way:

var $div-text= document.querySelector('.div-text'),
    // Pega a string do conteúdo atual
    HTMLTemporario = $div-text.innerHTML,
    // Novo HTML que será inserido
    HTMLNovo = '<img src="" height="200" alt="Visualisar...">';

// Concatena as strings colocando o novoHTML antes do HTMLTemporario
HTMLTemporario = HTMLNovo + HTMLTemporario;

// Coloca a nova string(que é o HTML) no DOM
$div-text.innerHTML = HTMLTemporario;