老师，为什么动态生成的元素没有添加到HTML当中去

来源：2-2 画圆函数介绍

慕盖茨1437616

2018-10-18 19:43:44

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>手势解锁</title>
    <style>
        body{
            text-align:center;
            background-color:#305066;
        }
    </style>
</head>
<body>
    <script src="arc/index.js">
        //生成背景 ok
        //动态title生成
        //用js动态生成canvas标签
        //js方式动态生成h3标签
        new canvasLock({}).init();
    </script>
</body>
</html>

 (function(){
     window.canvasLock=function(obj){
         this.height=obj.height;
         this.width=obj.width;
     };
     // js方式动态生成DOM
     canvasLock.prototype.initDom=function(){
         // 创建HTML元素
         var wrap=document.createElement('div');
         var str='<h4 id="title" class="title">绘制解锁图案</h4>';
         wrap.setAttribute('style','position:absolute;top:0;left:0,right:0;bottom:0');
         
         var canvas=document.createElement('canvas');
         canvas.setAttribute('id','canvas');
         canvas.style.cssText='background-color:#305066;display:inline-block;margin-top:15px';

         wrap.innerHTML=str;
         wrap.appendChild(canvas);
         // 优先前面的，是否是null或者undefined
         var width=this.width||300;
         var height=this.height||300;

         document.body.appendChild(wrap);
         // 高清屏缩放
         canvas.style.width=width+"px";
         canvas.style.height=height+"px";
     }
     // 程序初始化
     canvasLock.prototype.init=function(){
         this.initDom();
         console.log(wrap);
     }

 })();

写回答

1回答