天天看點
傳回

js元素建立的三種方式

元素建立的三種方式:

1. document.write("标簽的代碼及内容");

2. 對象.innerhtml="标簽及代碼";

3. document.createElement("标簽的名字");

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>"
};

案例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>";
    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>

建立元素：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：點選按鈕，動态的建立清單，滑鼠滑過高亮

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

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

<!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循環

<!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>
html i++ 父級元素 百度 匿名函數
上一篇: Js在計算浮點數（小數）不準确，解決方案
下一篇: JS多态封裝繼承

繼續閱讀