SOURCE

var oDiv = document.createElement('div'); // 创建盒子
var oP = document.createElement('p');
var oSpan = document.createElement('span');
var btn = document.getElementById('btn');
var body = document.getElementsByTagName('body');

btn.onclick = function () {
  oP.innerText = 'this is true music';
  oSpan.innerText = 'X';
  
  oDiv.appendChild(oP);
  oP.appendChild(oSpan);
  
  oDiv.id = "wrapper";
  oP.id = 'p1';
  oSpan.id = 'span1';
  
  body[0].insertBefore(oDiv,btn);
}

oSpan.onclick = function() {
  body[0].removeChild(oDiv);
}

<button id="btn">try to click？</button>

*{
            padding: 0;
            margin:0;
        }
        html,body{
            height: 100%;
        }
        #wrapper{
            width:100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
        }
        #p1{
            position: relative;
            top:150px;
            width:400px;
            height: 200px;


            text-align: center;
            line-height: 200px;

            margin:auto;
            background-color: white;
        }
        #span1{
            position: absolute;
            right: 0;
            top:0;

            width: 30px;
            height: 30px;

            font-size: 20px;
            line-height: 30px;
            text-align: center;

            color: #ffffff;
            background-color: red;

        }