创建表格及只创建一个元素的方法

<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").οnclick=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").οnclick=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").οnclick=function () {
        //判断这个div中有没有按钮，有就删除
        //判断这个按钮的子元素是否存在
        if(!ver("btn2")){
            var Obj=document.createElement("input");
            Obj.type="button";
            Obj.value="按钮";
            Obj.id="btn2";
            ver("dv").appendChild(Obj);
        }
    };


</script>

转载于:https://www.cnblogs.com/lujieting/p/10050433.html