innerText 與 innerHtml的區別（二）

阿新 • • 發佈：2019-01-21

innerText 與 innerHtml不僅在獲取元素文字上有區別，而且在設定上同樣有區別。

1、innerText 在設定HTML標籤時，會將<>進行轉義，在輸出的時候會原樣輸出，並不會解析HTML標籤

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
</body>

<script>
    var box = document.getElementById("box");
    box.innerText = "<p>這是P標籤</p><p>這是P標籤</p><p>這是P標籤</p>";
</script>
</html>

列印結果為：

這是P標籤這是P標籤這是P標籤 這是P標籤這是P標籤這是P標籤

2、innerHtml 在設定HTML標籤時，瀏覽器會將HTML標籤名解析成對應的標籤

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
</body>

<script>
    var box = document.getElementById("box");
    box.innerHTML = "<p>這是P標籤</p><p>這是P標籤</p><p>這是P標籤</p>";
</script>
</html>

列印的結果為：

這是P標籤
這是P標籤
這是P標籤

3、封裝相容版本的innerText，因為低版本的火狐瀏覽器不支援innerText，而是支援textContent

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
</body>

<script>
    var box = document.getElementById("box");
    var str = "<p>這是P標籤</p><p>這是P標籤</p><p>這是P標籤</p>";
    setText(box, str);
    function setText(element, value) {
//        因為在IE8及之前的瀏覽器中獲取element.innerText的值是undefine 所以判斷型別比較好
        if(typeof element.innerText == "string") {
            element.innerText = value;
        }else {
            element.textContent = value;
        }
    }
</script>
</html>

innerText 與 innerHtml的區別（二）

innerText 與 innerHtml不僅在獲取元素文字上有區別，而且在設定上同樣有區別。 1、innerText 在設定HTML標籤時，會將<>進行轉義，在輸出的時候會原樣輸出，並不會解析HTML標籤 <!doctype html> <h

堆（heap）與棧（stack）的區別（二）

程式的執行場所是記憶體，棧和堆是程序的虛擬記憶體中的兩部分割槽域。當程式被執行時，程式程式碼，你所建立的變數、常量等都會被壓入棧空間裡，棧是程式程式碼的執行區域。棧的記憶體地址是連續的且被一一記錄，所以說當你建立了一個變數(比如int var = 1)，我們就可以通過var這個變數來訪問變數的內容

C++和C語言的區別（二）——動態開闢記憶體的區別與new的使用

C++中和C語言中都有動態開闢記憶體的概念，C語言中使用的是庫函式malloc和free，而C++中使用的則是關鍵字new與delete，它們的部分區別如下：現在我們同時使用兩種方式動態開闢二維陣列a[5][5] C語言： #include <malloc.h> #i

Linux與VxWorks主要區別（二）：執行模式

Linux與VxWorks的主要區別 2、執行模式 Linux VxWorks 保護模式真實模式 VxWorks上應用程式執行在“真實模式”下，無使用者模式和核心模式之分； Linux則是採用“保護模式”，

Java靜態分派與動態分派（二）

xiang oid main isp 準備 center 使用 name 編譯過程方法調用並不等於方法執行，方法調用階段唯一的任務就是確定被調用方法的版本（即調用哪一個方法），暫時還不涉及方法內部的具體運行過程。在程序運行時，進行方法調用是最普遍、最頻繁的操作，但是Cl

EL與JSTL學習（二）——JSTL技術

功能裝包 str 常用標簽 bsp jsp頁面 reac and 返回 1．JSTL概述 JSTL（JSP Standard Tag Library)，JSP標準標簽庫，可以嵌入在jsp頁面中使用標簽的形式完成業務邏輯等功能。 jstl出現的目的同el一樣也是要代替j

數據結構與算法（二）--棧與隊列

break col color 一個大小 amp 頂上 const 試題棧和隊列棧和隊列都是比較常用的數據結構。棧的應用非常的廣泛，比如說，遞歸函數的實現就是借助於棧保存相關的數據。操作系統中每個線程也會使用棧來保存函數調用涉及到的一些參數和其他變量等。棧最大的一個特

C之有符號與無符號（二）

C語言有符號數無符號數我們在 C 語言中經常會見到 unsigned 關鍵字，那麽這是什麽意思呢？在計算機內，數據類型分為有符號和無符號兩種類型。它的最高位用於標識數據的符號：如果最高位為 1，表明這個數為負數；如果是0的則表明這個數為正數。那麽我們就來做個試驗驗證下，代碼如

VIVADO FIR濾波器設計與仿真（二）

put tps ilo 用法 ilog ril [ ] 技術仿真 VIVADO FIR濾波器設計與仿真（二）在VIVADO FIR濾波器設計與仿真（一）中產生了兩路正弦信號，頻率分別為4MHz和5MHz,今天要進行FIR濾波器設計，在進行濾波器設計之前，需要對濾波器的參

數據結構與算法（二）

port timer類 mage pass func 代碼執行 atm 數據結構與算法設置 python內置類型性能分析 timeit模塊 class timeit.Timer(stmt="pass",setup=‘pass‘,time=<timer functio

認識與設計Serverless（二）

平臺三方服務函數 style bubuko spa ron pan 一、設計Serverless的功能模塊　　第一節講了Serverless一些概念與特性，廢話居多，概念的東西了解過後要有設計與構思，才能學到精髓，一個Serverless平臺的形成，涉及到很多模塊的

TCP/IP協議與HTTP協議（二）

動向沒有代理 serve 相互基本而且網絡連接正式 TCP/IP協議是傳輸層協議，主要解決數據如何在網絡中傳輸，而HTTP是應用層協議，主要解決如何包裝數據。 1、TCP連接手機能夠使用聯網功能是因為手機底層實現了TCP/IP協議，可以使手機終端通過無線網絡

Java常用的八種排序演算法與程式碼實現（二）：歸併排序法、快速排序法

注：這裡給出的程式碼方案都是通過遞迴完成的－－－歸併排序（Merge Sort）：　　分而治之，遞迴實現　　如果需要排序一個數組，我們先把陣列從中間分成前後兩部分，然後對前後兩部分進行分別排序，再將排好序的數組合並在一起，這樣整個陣列就有序了　　歸併排序是穩定的排序演算法，時間

ELF檔案載入與動態連結（二）

GOT應該儲存的是puts函式的絕對虛地址，這裡為什麼儲存的卻是[email protected]的第二條指令呢? 原來“直譯器”將動態庫載入記憶體後，並沒有直接將函式地址更新到GOT表中，而是在函式第一次被呼叫時，才會進行函式地址的重定位，這樣做的好處是可以加快程式載入速度，尤其對大型程式來說。有

Python運維開發：運算子與資料型別（二）

python物件的相關術語： python程式中儲存的所有資料都是圍繞物件這個概念展開的：程式中儲存的所有資料都是物件每個物件都有一個身份、一個型別和一個值　　　　例如，school='MaGe Linux'會以'MaGe Linux'建立一個字串物件，其身份是指向它在記憶體中所處位

Oracle資料庫入門使用者與表空間（二）

目錄甲骨文使用者協議介面卡錯誤解決方案檢視使用者啟動scott使用者表空間建立永久表空間修改永久表空間增加資料檔案刪除資料檔案（注意不能刪除第一個建立的資料檔案，除非刪除所有）刪除表空間甲骨

linux系統使用者身份與檔案許可權（二）

0.檔案的許可權與歸屬儘管在Linux系統中一切都是檔案，但是每個檔案的型別不盡相同，因此Linux系統使用了不同的字元來加以區分，常見的字元如下所示。 -：普通檔案 d：目錄檔案 l：連結檔案 b：塊裝置檔案 c：字元

Spring Boot Actuator詳解與深入應用（二）：Actuator 2.x

《Spring Boot Actuator詳解與深入應用》預計包括三篇，第一篇重點講Spring Boot Actuator 1.x的應用與定製端點；第二篇將會對比Spring Boot Actuator 2.x 與1.x的區別，以及應用和定製2.x的端點；第三篇將會介紹Actuator metric指

ajax 中 post 請求和 get 請求的區別（二）

get 請求 1、傳遞資料方式：資料直接在post 的 url 中傳遞，直接拼接在 url ? 後面，多個數據用 & 符號拼接 xhr.open('get ‘, 2.get.php?username = Tom & age = 30&’)

c/c++區別（二）引用

第6個區別：引用一．引用傳入變數：記憶體單元的別名引用：記憶體單元的別名引用是一個別名底層處理：C++中和指標處理相同在用到引用變數的地方系統會自動解引用引用開闢記憶體引用的特點

innerText 與 innerHtml的區別 （二）

相關推薦

innerText 與 innerHtml的區別（二）