Web API---DOM---元素創建的不同方式---三種方式，5個案例

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/06/11997887.html
-Advertisement-
Play Games

元素創建 為了提高用戶的體驗 元素創建的三種方式: 1. document.write("標簽的代碼及內容"); 2. 對象.innerHTML="標簽及代碼"; 3. document.createElement("標簽的名字"); 1. document.write("標簽的代碼及內容"); m ...


元素創建-----為了提高用戶的體驗

 

元素創建的三種方式:

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：點擊按鈕，動態的創建列表，滑鼠滑過高亮

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

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

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

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [20191206]隱含參數_db_always_check_system_ts.txt
    [20191206]隱含參數_db_always_check_system_ts.txt--//今年年頭我做tab$刪除恢復時,遇到的問題,就是遇到延遲塊清除的問題.參考鏈接:http://blog.itpub.net/267265/viewspace-2564716/http://blog.itp ...
  • MySQL Last_SQL_Errno: 1062----經典錯誤，主鍵衝突
    一、基礎信息 1. Centos7.4 2.MySQL 5.7.21 3.基於gtid的複製 二、異常描述 誤把從節點當成主節點插入一條數據，同一條數據在主、從節點插入都進行了一次插入操作，導致主鍵衝突，slave下的SQL線程異常。 建議設置從庫為只讀： set global read_only= ...
  • Coroutines in Android - One Shot and Multiple Values
    在Android中, 我們用到的數據有可能是一次性的, 也有可能是需要多個值的. 本文介紹Android中結合協程(coroutines)的MVVM模式如何處理這兩種情況. 重點介紹協程`Flow`在Android中的應用. ...
  • Android O 彩信發送在Framework中的控制。數據關閉，是否計費APN可以發送彩信
    [版權來至mtk FAQ. 請勿隨意轉發] [FAQ20587] Android O 彩信發送在Framework中的控制 內容 (2018-01-30) [DESCRIPTION] Android o mtk預設設計：彩信發送會受到數據開關控制，當數據開關關的時候，無法發送彩信。 這個是回歸goo ...
  • jQuery自定義插件
    自定義一個jQuery二級菜單插件 自定義jQuery插件需要瞭解： 命名規範:jQuery.插件名-版本.js 以工具(全局)函數形式加到jQuery中: $.extend({函數名:function(){功能代碼}}); 使用時：$.函數名(); 以成員(局部)函數形式加到jQuery中: $. ...
  • Cookie插件的使用
    jQuery-cookie插件的使用 什麼是插件？ 基於jQuery的語法，按照一定規範書寫，具有特定功能的腳本文件，稱為插件。 插件除了js文件之外，有的還包含css文件，圖片和字體等資源文件。 在jQuery的官網https://jquery.com/搜索和下載需要的插件。 1.引入cookie ...
  • Web API---DOM---為元素綁定事件的引入，為元素綁定多個代碼，相容代碼
    1. 為元素綁定事件的引入： 用src直接綁定多個，只實現最後一個（programmer2.js） <input type="button" value="按鈕" id="btn"/> <script src="common.js"></script> <script src="programmer ...
  • Web API---DOM---元素相關的操作方法
    1. 追加子元素 my$("dv").appendChild(obj); 2. 把新的子元素插入到第一個子元素的前面 my$("dv").insertBefore(obj, my$("dv").firstElementChild); 3. 移除父級元素中第一個子級元素 my$("btn2").onc ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類