JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<input id="abrirPopUp" type="button" value="Abrir PopUp" />

<template id="tmplPopUp">
  <div>
    <label>
      Label 01:
      <input id="label01" type="text" />
    </label>
  </div>
  <div>
    <label>
      Label 02:
      <input id="label02" type="text" />
    </label>
  </div>
  <div>
    <label>
      <input id="enviar" type="button" value="Enviar" />
    </label>
  </div>
</template>

JavaScript

var tmplPopUp = document.getElementById("tmplPopUp");
var abrirPopUp = document.getElementById("abrirPopUp");

abrirPopUp.addEventListener("click", function () {
  var blobPopUp = new Blob([tmplPopUp.innerHTML], { type: 'text/html' });
  var urlPopUp = URL.createObjectURL(blobPopUp);
  var popUp = window.open(urlPopUp, "", "width=350, height=300");
  
  popUp.addEventListener("load", function (event) {   
    var label1 = popUp.document.getElementById("label01");
    var label2 = popUp.document.getElementById("label02");
    var enviar = popUp.document.getElementById("enviar");    
    
    var label3 = {};
    label3.div = popUp.document.createElement("div");
    label3.label = popUp.document.createElement("label");
    label3.textNode = popUp.document.createTextNode("Label 03: ");
    label3.input = popUp.document.createElement("input");    
    
    label3.input.id = "label03";
    label3.input.type = "text";
    label3.label.appendChild(label3.textNode);
    label3.label.appendChild(label3.input);
    label3.div.appendChild(label3.label);
    enviar.parentNode.insertBefore(label3.div, enviar);
    
    var label3 = popUp.document.getElementById("label03");
    console.log(label1, label2, label3, enviar);
  });  
});