JavaScript元素创建的方式（三）

1、动态创建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="动态创建表格" id="btn"/>
<div id="box"></div>
<script>
 var arr = [
     {name:"百度", href:"http://www.baidu.com"},
     {name:"新浪", href:"http://www.sina.com.cn"},
     {name:"淘宝", href:"https://www.taobao.com"},
     {name:"天猫", href:"https://www.tmall.com"},
     {name:"京东", href:"https://www.jd.com"},
     {name:"唯品会", href:"https://www.vip.com"}
 ];
 var box = document.getElementById("box");
 document.getElementById("btn").onclick = function(){
     //创建table标签并加到div中
     var tableObj = document.createElement("table");
     tableObj.border = "1";
     tableObj.cellPadding = "0";
     tableObj.cellSpacing = "0";
     box.appendChild(tableObj);
     //创建行，把行加到table中
     for(var i=0; i<arr.length; i++){
         var trObj = document.createElement("tr");
         tableObj.appendChild(trObj);
         //创建第一个列，加入到行中
         var td1 = document.createElement("td");
         td1.innerHTML = arr[i].name;
         trObj.appendChild(td1);
         //创建第二个列加入到行中
         var td2 = document.createElement("td");
         td2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
         trObj.appendChild(td2);
     }
 };
</script>
</body>
</html>

结果：

第二列是可以点击跳转的

2、在创建新的元素的过程中，点击按钮就会创建一次，再点击按钮再创建一次，如何解决这个问题？使得点击多次按钮，创建出来的元素也只创建了一次。

方法一：先判断有没有，有就删除，然后再创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="box" style="border:1px solid red; width: 400px;">
    我是一个盒子
</div>

<script>
    var box = document.getElementById("box");
    document.getElementById("btn").onclick = function(){
        if(document.getElementById("divObj")) {
            //判断有没有，有就先删除，if里是true，表示有
            box.removeChild(document.getElementById("divObj"));
        }
        //创建一个div用来包括要创建的内容
        var divObj = document.createElement("div");
        divObj.id = "divObj";
        box.appendChild(divObj);
        //创建一个p元素
        var pObj = document.createElement("p");
        pObj.innerHTML = "这是三只小狗";
        //那创建的元素追加到父元素中
        divObj.appendChild(pObj);
        //创建一个img元素
        var imgObj = document.createElement("img");
        imgObj.src = "1.jpg";
        imgObj.alt = "三只小狗";
        //那创建的元素追加到父元素中
        divObj.appendChild(imgObj);
    };
</script>

</body>
</html>

这种方法会造成多次点击按钮，不断地重复的删除和创建

方法二：先判断有没有，没有就创建，有就不创建了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="box" style="border:1px solid red; width: 400px;">
    我是一个盒子
</div>

<script>
    var box = document.getElementById("box");
    document.getElementById("btn").onclick = function(){
        //判断，没有的话就创建
        if(!document.getElementById("divObj")) {
            //创建一个div用来包括要创建的内容
            var divObj = document.createElement("div");
            divObj.id = "divObj";
            box.appendChild(divObj);
            //创建一个p元素
            var pObj = document.createElement("p");
            pObj.innerHTML = "这是三只小狗";
            //那创建的元素追加到父元素中
            divObj.appendChild(pObj);
            //创建一个img元素
            var imgObj = document.createElement("img");
            imgObj.src = "1.jpg";
            imgObj.alt = "三只小狗";
            //那创建的元素追加到父元素中
            divObj.appendChild(imgObj);
        }
    };
</script>

</body>
</html>

两种方法，都能实现多次点击按钮，只创建一次对象。

JavaScript元素创建的方式（三）

方法一：先判断有没有，有就删除，然后再创建。

方法二：先判断有没有，没有就创建，有就不创建了。

猜你喜欢