從零開始學 Web 之 DOM（五）元素的建立

時間 2019-11-17

標籤開始 web dom 元素建立欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公衆號：Web前端之巔
博客園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！javascript

1、元素的建立

一、元素建立的三種方式

1.一、方式一

document.write("標籤代碼及內容");html

示例：前端

<body>
    <input type="button" value="按鈕" id="btn">
    
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
            document.write("<p>這是一個p標籤</p>");
        };
        // document.write("<p>這是一個p標籤</p>");
    </script>
</body>

缺陷：若是是在頁面加載完畢後，經過這種方式建立元素的話，頁面上的除此建立元素以外的全部內容都會被清除。可是在頁面加載的時候不會。java

1.二、方式二

標籤.innerHTML = "標籤代碼及內容";git

示例：github

<body>
  <script>
    <input type="button" value="按鈕" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
            my$("dv").innerHTML = "lvonve";
        };
  </script>
</body>

使用 innerHTML，在頁面加載完畢後，不會清除頁面的內容。微信

案例：動態建立列表

// 方式一
<body>
    <input type="button" value="建立列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
            my$("dv").innerHTML = "<ul><li>列表一</li><li>列表二</li><li>列表三</li></ul>";
        };
    </script>
</body>

方式一的方式太過死板，li 標籤的個數和內容都是固定的，若是增長 li 的個數須要修改源碼。app

// 方式二
<body>
    <input type="button" value="建立列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        var value = ["列表一", "列表二", "列表三", "列表四", "列表五"];
        my$("btn").onclick = function() {
            var str = "<ul style='list-style: none;cursor: pointer;'>"
            for(var i=0; i<value.length; i++) {
                str += "<li>"+value[i]+"</li>";
            }
            str += "</ul>";
            my$("dv").innerHTML = str;
        };
    </script>
</body>

1.三、方式三

第一步：建立元素，返回值爲一個對象元素函數

document.creatElement("標籤的名字");學習

第二步：將元素追加到父元素中

父元素.appendChild(建立的對象);

示例：

<body>
    <input type="button" value="建立列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
            var pObj = document.createElement("p");
            setInnerText(pObj, "這是個p標籤"); // 本身封裝在 common.js 的方法
            my$("dv").appendChild(pObj);
        };
    </script>
</body>

案例：動態建立列表

<body>
    <input type="button" value="建立列表" id="btn">
    <div id="dv"></div>

    <script src="common.js"></script>
    <script>
        var values = ["列表1","列表2","列表3","列表4","列表5","列表6"];
        my$("btn").onclick = function() {
            var ulObj = document.createElement("ul");
            my$("dv").appendChild(ulObj);

            for(var i=0; i<values.length; i++) {
                var liObj = document.createElement("li");
                liObj.innerHTML = values[i];
                ulObj.appendChild(liObj);
              
                // 鼠標進入事件
                liObj.onmouseover = onmouseoverHandle;
                // 鼠標離開事件
                liObj.onmouseout = onmouseoutHandle;
            }
            function onmouseoverHandle() {
                this.style.backgroundColor = "yellow";
            }
            function onmouseoutHandle() {
                this.style.backgroundColor = "";
            }
        };
    </script>
</body>

當在循環中添加事件的時候，建議不使用匿名函數，由於每一個匿名函數都會佔用一片內存空間，而使用函數調用的方式，無論循環多少次，都使用一份代碼。

案例：動態建立表格

<body>
    <input type="button" value="建立列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        var arr = [
            {name:"百度", href:"www.baidu.com"},
            {name:"谷歌", href:"www.baidu.com"},
            {name:"優酷", href:"www.baidu.com"},
            {name:"土豆", href:"www.baidu.com"},
            {name:"騰訊", href:"www.baidu.com"}
        ];

        my$("btn").onclick = function() {
            // 建立table標籤，並添加到div中
            var tableObj = document.createElement("table");
            tableObj.border = "1";
            tableObj.cellSpacing = "0";
            tableObj.cellPadding = "0";
            my$("dv").appendChild(tableObj);

            // 建立tr標籤，添加到table中
            for(var i=0; i<arr.length; i++) {
                var trObj = document.createElement("tr");
                tableObj.appendChild(trObj);
                // 添加第一列
                var tdObj1 = document.createElement("td");
                tdObj1.innerHTML = arr[i].name;
                trObj.appendChild(tdObj1);
                // 添加第二列
                var tdObj2 = document.createElement("td");
                tdObj2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
                trObj.appendChild(tdObj2);
            }
        };
    </script>
</body>

tableObj.border = "1"; 不能使用 tableObj.style.border = "1px solid red"; 這樣的話，只有table有邊框，而 tr 沒邊框。因此 js 中，table 標籤有自帶的 border 屬性能夠設置邊框，注意不須要 px。

二、其餘操做元素的方法

<body>
    <input type="button" value="添加一個按鈕1" id="btn1">
    <input type="button" value="添加一個按鈕2" id="btn2">
    <input type="button" value="刪除第一個按鈕" id="btn3">
    <input type="button" value="刪除全部按鈕" id="btn4">
    <div id="dv"></div>

    <script src="common.js"></script>
    <script>
        var count = 0;
        // 日後追加按鈕
        my$("btn1").onclick = function() {
            count++;
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "按鈕" + count;
            my$("dv").appendChild(btn);
        };
        // 往前追加按鈕
        my$("btn2").onclick = function() {
            count++;
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "按鈕" + count;
            my$("dv").insertBefore(btn, my$("dv").firstElementChild);
        };
        // 從第一個按鈕開始刪除一個按鈕
        my$("btn3").onclick = function() {
            my$("dv").removeChild(my$("dv").firstElementChild);
        };
        // 刪除全部按鈕
        my$("btn4").onclick = function() {
            while(my$("dv").firstElementChild) {
                my$("dv").removeChild(my$("dv").firstElementChild);
            }
        };
    </script>
</body>