<input type="button" value="點擊" id="bt"/>
<div id="dv"></div>
<script src="commer.js"></script>
<script>
    var arr=[
        {name:"百度",href:"http://www.baidu.com"},
        {name:"谷歌",href:"http://www.baidu.com"},
        {name:"愛奇藝",href:"http://www.baidu.com"},
        {name:"優酷",href:"http://www.baidu.com"},
        {name:"騰訊",href:"http://www.baidu.com"}
    ];
    //點擊按鈕創建表格
    ver("bt").onclick=function () {
        //創建table加入到div中
      var tableObj=document.createElement("table");
        tableObj.border="1";
        tableObj.cellPadding="0";
        tableObj.cellSpacing="0";
        ver("dv").appendChild(tableObj);
        //創建行,把行加入到table中
      for(var i=0;i<arr.length;i++){
          var dt=arr[i];//每個對象
          var trObj=document.createElement("tr");
          tableObj.appendChild(trObj);
          //創建第一個列,然後加入到行中
          var tb1=document.createElement("td");
          tb1.innerText=dt.name;
          tableObj.appendChild(tb1);
          //創建第二個列
          var tb2=document.createElement("td");
          tb2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
          tableObj.appendChild(tb2);
      }
    };

</script>

<input type="button" value="點擊" id="btn"/>
<div id="dv"></div>
<script src="commer.js"></script>
<script>
    //有則刪除，無則創建

//先判斷有沒有，有就刪除，沒有就創建，創建多次，但還是顯示一個
//     ver("btn").onclick=function () {
//         //判斷這個div中有沒有按鈕，有就刪除
//         //判斷這個按鈕的子元素是否存在
//         if(ver("btn2")){
//             ver("dv").removeChild(ver("btn2"));
//         }
//         var Obj=document.createElement("input");
//         Obj.type="button";
//         Obj.value="按鈕";
//         Obj.id="btn2";
//         ver("dv").appendChild(Obj);
//     };

//只創建一次
    ver("btn").onclick=function () {
        //判斷這個div中有沒有按鈕，有就刪除
        //判斷這個按鈕的子元素是否存在
        if(!ver("btn2")){
            var Obj=document.createElement("input");
            Obj.type="button";
            Obj.value="按鈕";
            Obj.id="btn2";
            ver("dv").appendChild(Obj);
        }
    };


</script>

創建表格及只創建一個元素的方法