JS---DOM---元素建立的不一樣方式---三種方式，5個案例

時間 2019-12-09

標籤 dom 元素建立不一樣方式三種個案欄目 JavaScript 简体版

原文原文鏈接

元素建立-----爲了提升用戶的體驗

元素建立的三種方式:

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

2. 對象.innerHTML="標籤及代碼";

3. document.createElement("標籤的名字");

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

    my$("btn").onclick = function () {
      document.write("<p>這是一個標籤</p>");
    };

案例1：用documnet.write嵌入外部的代碼內容（例子：百度新聞碼）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style type=text/css>
    div {
      font-size: 12px;
      font-family: arial
    }

    .baidu {
      font-size: 14px;
      line-height: 24px;
      font-family: arial
    }

    a, a:link {
      color: #0000cc;
    }

    .baidu span {
      color: #6f6f6f;
      font-size: 12px
    }

    a.more {
      color: #008000;
    }

    a.blk {
      color: #000;
      font-weight: bold;
    }</style>
</head>
<body>

<script language="JavaScript" type="text/JavaScript"
        src="http://news.baidu.com/ns?word=x%20title%3Aiphone&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
</body>
</html>

2. 對象.innerHTML="標籤及代碼";

    //點擊按鈕,在div中建立一個p標籤
    //第二種方式建立元素: 對象.innerHTML="標籤代碼及內容";

    my$("btn").onclick = function () {
      my$("dv").innerHTML = "<p>牀前明月光 疑是地上霜，舉頭望明月，低頭思故鄉</p>"
    };

案例2：點擊按鈕,在div中建立一個圖片

  <input type="button" value="來個圖片" id="btn" />
  <div id="dv"></div>

  <script src="common.js"></script>

  <script>
    my$("btn").onclick = function () {
      my$("dv").innerHTML = "<img src='images/liuyan.jpg' alt='美女' />";
    };
  </script>

案例3：點擊按鈕建立列表，鼠標移過改變背景顏色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 250px;
      height: 350px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <input type="button" value="建立列表" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>

    var names = ["楊過", "郭靖", "張無忌", "張三丰", "喬峯", "令狐沖"]
    var str = "<ul style='list-style-type:none;cursor:pointer'>";
    my$("btn").onclick = function () {
      //根據循環建立對應對數的li
      for (var i = 0; i < names.length; i++) {
        str += "<li>" + names[i] + "</li>";
      }
      str += "</ul>";
      my$("dv").innerHTML = str;

      //代碼執行到這裏,li已經有了
      //獲取全部的li,遍歷,添加鼠標進入事件,鼠標離開事件
      var list = my$("dv").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
          this.style.backgroundColor = "hotpink";
        };
        list[i].onmouseout = function () {
          this.style.backgroundColor = "";
        };
      }
    };
  </script>
</body>

</html>

3. document.createElement("標籤的名字");

建立元素：document.createElement("標籤名字");對象

把元素追加到父級元素中

點擊按鈕,在div中建立一個p

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      border: 1px solid pink;
    }
  </style>
</head>

<body>
  <input type="button" value="建立p" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      //建立元素
      var pObj = document.createElement("p");
      pObj.innerText = ("這是一個p");
      // setInnerText(pObj, "這是一個p");
      //把建立後的子元素追加到父級元素中
      my$("dv").appendChild(pObj);
    };

  </script>
</body>

</html>

案例4：點擊按鈕，動態的建立列表，鼠標滑太高亮

若是是循環的方式添加事件,推薦用命名函數css

若是不是循環的方式添加事件,推薦使用匿名函數html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid pink;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <input type="button" value="建立動態列表" id="btn" />
  <div id="dv"></div>
  <!-- <input type="button" value="建立列表" id="btn"/>
<div id="dv"></div> -->
  <script src="common.js"></script>
  <script>
    //點擊按鈕動態的建立列表,把列表加到div中
    var kungfu = ["降龍十八掌", "黯然銷魂掌", "葵花寶典", "九陰真經", "吸星大法", "如來神掌", "化骨綿掌", "玉女心經"];

    my$("btn").onclick = function () {
      //建立ul,把ul馬上加入到父級元素div中
      var ulObj = document.createElement("ul");
      my$("dv").appendChild(ulObj); //追加子元素
      //動態的建立li,加到ul中
      for (var i = 0; i < kungfu.length; i++) {
        var liObj = document.createElement("li");
        //設置li中間的文字內容
        liObj.innerHTML = kungfu[i];
        ulObj.appendChild(liObj);
        //爲li添加鼠標進入和離開事件
        liObj.onmouseover = mouseoverHandle;
        liObj.onmouseout = mouseoutHandle;
      }
    };

    //此位置.按鈕的點擊事件的外面
    function mouseoverHandle() {
      this.style.backgroundColor = "hotpink";
    }
    function mouseoutHandle() {
      this.style.backgroundColor = "";
    }

  // 若是是循環的方式添加事件,推薦用命名函數
  // 若是不是循環的方式添加事件,推薦使用匿名函數

  </script>
</body>

</html>

案例5：點擊按鈕建立一個表格

本身給本身debug很久，才發現沒有把建立的2個列放進for循環app

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      border: 2px solid hotpink;
    }
  </style>
</head>

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

  <script src="common.js"></script>
  <script>
    var arr = [
      { name: "百度", href: "http://www.baidu.com" },
      { name: "谷歌", href: "http://www.google.com" },
      { name: "優酷", href: "http://www.youku.com" },
      { name: "土豆", href: "http://www.tudou.com" },
      { name: "快播", href: "http://www.kuaibo.com" },
      { name: "愛奇藝", href: "http://www.aiqiyi.com" }
    ];

    //點擊按鈕建立表格
    my$("btn").onclick = function () {
      //建立table加入div
      var tableObj = document.createElement("table");
      tableObj.border = "1";
      tableObj.cellPadding = "0";
      tableObj.cellSpacing = "0";
      my$("dv").appendChild(tableObj);
      //建立行tr,加入table
      for (var i = 0; i < arr.length; i++) {
        var dt = arr[i]; //每一個對象
        var trObj = document.createElement("tr");
        tableObj.appendChild(trObj);
        //建立第一個列，加入到行
        var td1 = document.createElement("td");
        td1.innerText = dt.name;
        trObj.appendChild(td1);

        //建立第二個列，加入到行
        var td2 = document.createElement("td");
        td2.innerHTML = "<a href=" + dt.href + ">" + dt.name + "</a>";
        trObj.appendChild(td2);
      }
    };

  </script>
</body>

</html>