how to make div on html on js?-CodePudding

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 ?

CodePudding user response：

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>