如何在js上的html上制作div？

Question

I try create a modal box for my Extention. I have a html5 code

<dialog>
  <p>Window</p>
  <button id="close">Close</button>
</dialog>
<button id="show">Open Modal Box</button>

and JS code

var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};

But in my Extention not run my code

function Window_app(){ 
var myDiv = document.createElement('dialog');
 var myP = document.createElement ('p')
 var myPText = document.createTextNode("Это окно, которое сделано на html5 и javascript");
 var buttonClose = document.createElement('button');
 buttonClose.id = ('close');
 var buttonShow = document.createElement('button');
 buttonShow.id = ('show');

 var dialog = document.querySelector('dialog');
 document.querySelector('#show').onclick = function() {
   dialog.show();
 };
 document.querySelector('#close').onclick = function() {
   dialog.close();
 };

}

How make html code in js?

Answer 1

add a html container to store everything, and then create elements and append them accordingly by referencing them

 function Window_app() { var dialog = document.createElement('dialog'); var myP = document.createElement('p') var myPText = document.createTextNode("Это окно, которое сделано на html5 и javascript"); var buttonClose = document.createElement('button'); buttonClose.id = ('close'); buttonClose.appendChild(document.createTextNode("закрыть")); var buttonShow = document.createElement('button'); buttonShow.appendChild(document.createTextNode("открыть")); buttonShow.id = ('show'); myP.appendChild(myPText); var container = document.querySelector('#dialog-container'); dialog.appendChild(myP); container.appendChild(dialog); dialog.appendChild(buttonClose); container.appendChild(buttonShow); buttonShow.onclick = function() { dialog.show(); }; buttonClose.onclick = function() { dialog.close(); }; } Window_app()

 <div id="dialog-container"></div>