前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)

更新時間：2026年07月03日 09:55:57 作者：master_chenchengg

innerHTML和innerText都是元素的屬性,通過修改這個元素的屬性可以達到修改元素內(nèi)容的目的,這篇文章主要介紹了前端innerHTML和innerText到底有啥區(qū)別及避坑指南的相關(guān)資料,需要的朋友可以參考下

前言

說實話，我剛?cè)胄心菚?，這四個屬性真的把我整懵了。不是夸張，是真的用了差不多三年才徹底分清它們誰是誰。記得特別清楚，有一次老板讓我改個按鈕文字，我當(dāng)時腦子一抽，順手就寫了 innerHTML = "點我"。結(jié)果旁邊一位老前端大哥瞥了一眼，當(dāng)場給我整了句：“你這是在給 XSS 漏洞發(fā)邀請函?。?rdquo;

我當(dāng)時那個尷尬啊，恨不得找個地縫鉆進去。但從那以后我才真正意識到，innerHTML、outerHTML、innerText、outerText 這幾個貨，看著名字都差不多，長得也跟親兄弟似的，實際上性格迥異，用錯了地方分分鐘讓你懷疑人生。今天我就用大白話給你掰扯清楚，能幫你少走點我當(dāng)年踩過的那些坑，也算沒白寫這篇文章。

先認個臉：這幾個家伙到底是干啥的

咱們先別急著深入，先把這四個"兄弟"拉出來認個臉。它們都掛在 DOM 元素身上，都能讀寫內(nèi)容，但一個管"里面"，一個管"外面"；一個保留標(biāo)簽，一個只認文字。

你可以把它們想象成四個性格不同的室友：

innerHTML：那個能力最強但也最愛惹事的，啥都能干，但容易捅婁子
outerHTML：比較極端，做事做全套，連自己都搭進去
innerText：比較老實，只認你眼睛能看到的東西
outerText：基本上是個透明人，存在感極低

別急，咱們一個個扒開看，看看它們到底啥脾氣。

innerHTML：最常用但也最危險的那個

先說這個大家最熟悉的 innerHTML。這玩意兒可以說是前端操作 DOM 的"瑞士軍刀"，功能強大到讓人又愛又恨。

它能讀寫元素內(nèi)部的所有 HTML 內(nèi)容，包括子標(biāo)簽。比如你有個 div，里面塞了一堆東西：

<div id="box">
  <p>這是一段文字</p>
  <span style="color: red;">紅色文字</span>
</div>

這時候你用 JavaScript 去?。?/p>

const box = document.getElementById('box');
console.log(box.innerHTML);

你猜輸出啥？它會原封不動地把里面的 HTML 結(jié)構(gòu)給你吐出來：

"
  <p>這是一段文字</p>
  <span style="color: red;">紅色文字</span>
"

看到了吧，標(biāo)簽、屬性、樣式，全都保留著。這就是 innerHTML 的特點——它操作的是 HTML 字符串。

賦值的時候也一樣生猛：

// 直接往里面塞 HTML，瀏覽器會解析渲染
box.innerHTML = "<h2>新標(biāo)題</h2><p>新內(nèi)容</p>";

執(zhí)行完這句，頁面上立馬就會顯示一個 h2 標(biāo)題和一個段落。方便是真方便，但問題也出在這兒——因為它會解析 HTML，所以如果你不小心把用戶輸入直接塞進去，那就完犢子了。

XSS 漏洞：innerHTML 的致命傷

來，看個真實的翻車案例。假設(shè)你寫了個評論功能，后端返回用戶評論內(nèi)容，你直接用 innerHTML 渲染：

// 假設(shè)這是從服務(wù)器拿到的用戶評論
const userComment = "<img src='x' onerror='alert(\"你的 cookie 被我偷了！\"); stealCookie();'>";

// 危險操作！千萬別這么干！
document.getElementById('comment-box').innerHTML = userComment;

看到那個 onerror 了嗎？圖片加載失敗時會執(zhí)行里面的 JavaScript 代碼。如果這段代碼是發(fā)請求把你的 cookie 傳到黑客服務(wù)器，你就中招了。這就是典型的 XSS（跨站腳本攻擊）。

所以啊，但凡涉及到用戶輸入的內(nèi)容，千萬別直接往 innerHTML 里塞。那怎么辦？后面我會講到 textContent，那是更安全的選擇。

另一個坑：事件監(jiān)聽會消失

還有個新手容易踩的坑：用 innerHTML 重寫內(nèi)容后，原來綁定的事件全沒了！

<div id="container">
  <button id="btn">點我</button>
</div>

<script>
  const btn = document.getElementById('btn');
  const container = document.getElementById('container');
  
  // 給按鈕綁定點擊事件
  btn.addEventListener('click', () => {
    alert('按鈕被點了！');
  });
  
  // 過一會兒，你想更新 container 里的內(nèi)容
  setTimeout(() => {
    container.innerHTML = "<button id='btn'>新按鈕</button><p>新增的內(nèi)容</p>";
    
    // 這時候你再點按鈕，啥反應(yīng)都沒有！
    // 因為原來的按鈕 DOM 節(jié)點已經(jīng)被銷毀了
    // 新創(chuàng)建的按鈕雖然 id 一樣，但是個全新的對象，事件沒綁上去
  }, 3000);
</script>

看到了吧？innerHTML 賦值的時候，瀏覽器會先把原來的 DOM 節(jié)點全部銷毀，再創(chuàng)建新的節(jié)點。原來綁的事件、存的數(shù)據(jù)，全跟著舊節(jié)點一起進垃圾堆了。

那怎么解決？要么你在重寫 innerHTML 后重新綁定事件，要么用事件委托，把事件綁在父元素上：

// 用事件委托，綁在 container 上
container.addEventListener('click', (e) => {
  if (e.target.id === 'btn') {
    alert('按鈕被點了！');
  }
});

// 這樣即使 innerHTML 刷新了，事件照樣能響應(yīng)
// 因為事件是冒泡到 container 上的

性能小貼士

雖然 innerHTML 有安全問題，但不得不說，在某些場景下它性能還真不錯。比如你要一次性插入大量 HTML，用 innerHTML 比一個個創(chuàng)建 DOM 節(jié)點快多了：

// 低效做法：一個個創(chuàng)建
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `項目 ${i}`;
  list.appendChild(li);  // 每次都要操作 DOM，慢！
}

// 高效做法：用 innerHTML 一次性插入
let html = '';
for (let i = 0; i < 1000; i++) {
  html += `<li>項目 ${i}</li>`;
}
list.innerHTML = html;  // 只操作一次 DOM

不過要注意，字符串拼接多了也有性能問題，數(shù)據(jù)量大的時候最好用 DocumentFragment 或者數(shù)組 join。

outerHTML：連自己都不要了？

如果說 innerHTML 是"裝修內(nèi)部"，那 outerHTML 就是"推倒重建"——它不光改內(nèi)容，連當(dāng)前元素本體一起替換掉。

看個例子就明白了：

<div id="oldBox" class="container">
  <p>原來的內(nèi)容</p>
</div>

<script>
  const oldBox = document.getElementById('oldBox');
  
  // 用 outerHTML 替換
  oldBox.outerHTML = "<section id='newBox'><h1>全新的元素</h1></section>";
  
  // 這時候你再看 oldBox
  console.log(oldBox);  // 還在內(nèi)存里，但已經(jīng)不在頁面上了
  console.log(oldBox.parentNode);  // null！已經(jīng)被移出 DOM 樹了
  
  // 頁面上現(xiàn)在是個 section 元素，不是原來的 div 了
  console.log(document.getElementById('oldBox'));  // null
  console.log(document.getElementById('newBox'));  // 能拿到新的 section
</script>

發(fā)現(xiàn)沒？outerHTML 賦值后，原來的 oldBox 變量雖然還指向那個對象，但那個對象已經(jīng)跟頁面沒關(guān)系了。很多新手在這兒栽跟頭：改完 outerHTML 還想繼續(xù)操作原元素，結(jié)果控制臺報錯"not connected to DOM"或者干脆沒反應(yīng)。

實際開發(fā)中的坑

我之前就遇到過這種情況：想給某個元素加個包裝層，順手用了 outerHTML：

const element = document.querySelector('.target');
// 想把它包在一個 div 里
element.outerHTML = `<div class="wrapper">${element.outerHTML}</div>`;

// 然后想給原來的元素加樣式
element.style.color = 'red';  // 沒反應(yīng)！因為 element 已經(jīng)不在頁面上了

這時候 element 指向的還是原來那個 DOM 節(jié)點，但那個節(jié)點已經(jīng)被新的 HTML 替換掉了。你想操作頁面上的元素，得重新去查：

// 替換后重新獲取
const wrapper = document.querySelector('.wrapper');
const newElement = wrapper.querySelector('.target');
newElement.style.color = 'red';  // 這下行了

所以啊，用 outerHTML 之前要想清楚：我是不是還需要操作原來的元素？如果還需要，要么別用 outerHTML，要么記得替換完后重新獲取。

讀取 outerHTML 倒是挺有用

雖然賦值的時候坑多，但讀取 outerHTML 有時候挺方便的。比如你想復(fù)制一個元素包括它本身：

const original = document.getElementById('source');
// 拿到完整的 HTML 字符串，包括自己
const html = original.outerHTML;

// 可以把這個字符串存起來，或者插入到別的地方
document.getElementById('destination').innerHTML = html;

這比用 cloneNode 再插入要簡單粗暴，但注意同樣會丟失事件監(jiān)聽。

innerText：人眼看到的文字才是真的

好了，說完那兩個 HTML 相關(guān)的，咱們來聊聊文本相關(guān)的。innerText 這貨比較有意思，它只關(guān)心用戶實際能看到的文字內(nèi)容。

它到底怎么工作的？

innerText 會按照瀏覽器的渲染規(guī)則來提取文本。什么意思呢？就是它會考慮 CSS 樣式，忽略隱藏的元素。

<style>
  .hidden { display: none; }
  .invisible { visibility: hidden; }
</style>

<div id="content">
  <p>這是一段可見的文字</p>
  <p class="hidden">這段被 display:none 藏起來了</p>
  <p class="invisible">這段雖然看不見但占位置</p>
  <script>console.log('腳本內(nèi)容');</script>
  <style>body { margin: 0; }</style>
  <!-- 這是注釋 -->
</div>

<script>
  const div = document.getElementById('content');
  
  console.log(div.innerText);
  // 輸出："這是一段可見的文字"
  // 隱藏的、腳本、樣式、注釋，全都被忽略了！
</script>

看到了吧？innerText 很聰明，它知道用戶看不到的東西就不應(yīng)該被讀取。這在某些場景下特別有用，比如你想做個"復(fù)制頁面可見內(nèi)容"的功能。

寫入時的特性

讀取的時候挑三揀四，寫入的時候 innerText 倒是挺老實——它會自動把特殊字符轉(zhuǎn)義，當(dāng)成純文本處理。

const div = document.createElement('div');

// 寫入帶標(biāo)簽的字符串
div.innerText = "<h1>標(biāo)題</h1><script>alert('xss')<\/script>";

// 看頁面上的效果，標(biāo)簽被當(dāng)成普通文本顯示了
// 頁面上 literally 顯示：<h1>標(biāo)題</h1><script>alert('xss')</script>
// 不會執(zhí)行腳本，也不會渲染成標(biāo)題

console.log(div.innerHTML);  
// 輸出："&lt;h1&gt;標(biāo)題&lt;/h1&gt;&lt;script&gt;alert('xss')&lt;/script&gt;"
// 自動做了 HTML 實體編碼，安全！

這就是為什么處理用戶輸入時，用 innerText 比 innerHTML 安全得多。它會自動幫你做轉(zhuǎn)義，不用擔(dān)心 XSS。

但也有坑：性能問題和樣式依賴

innerText 雖然好用，但有個大坑：因為它要計算渲染后的文本，所以必須等瀏覽器把樣式都算好。這意味著讀取 innerText 可能會觸發(fā)重排（reflow），性能開銷不小。

const element = document.getElementById('box');

// 在循環(huán)里頻繁讀取 innerText？小心頁面卡頓！
for (let i = 0; i < 1000; i++) {
  const text = element.innerText;  // 每次都要重新計算布局
  // 做點啥...
}

尤其是在元素很多、樣式復(fù)雜的時候，頻繁讀取 innerText 會讓瀏覽器不斷重排，頁面卡成 PPT。

還有個坑：如果你在沒有渲染上下文的環(huán)境里用 innerText，比如 Web Worker 或者某些 SSR 場景，它會直接報錯或者返回 undefined，因為它依賴瀏覽器的 CSS 引擎。

outerText：那個幾乎沒人用的"幽靈"

說到 outerText，這貨簡直就是 DOM API 里的"幽靈"——理論上存在，但幾乎沒人用，甚至 Firefox 直接不支持。

它的設(shè)計初衷應(yīng)該是：像 outerHTML 一樣替換整個元素，但只保留純文本。

// 假設(shè)瀏覽器支持的話
const span = document.getElementById('highlight');
span.outerText = "普通文本";
// 預(yù)期效果：span 元素被替換為純文本節(jié)點，不再是元素了

但現(xiàn)實是：

Firefox：壓根沒實現(xiàn)這玩意兒
Chrome：雖然支持，但行為詭異，而且 MDN 文檔都懶得重點講它
IE：倒是支持，但誰還用 IE ?。?/li>

所以我的建議是：除非你在維護某個祖?zhèn)鞯?IE 項目，否則直接忘掉 outerText 的存在。它的存在就像 JavaScript 里的 with 語句——知道有這東西就行了，千萬別用。

等等，還有個隱藏大佬：textContent

聊到這兒，必須得提一下 textContent。雖然標(biāo)題里沒寫它，但這才是 W3C 標(biāo)準里的"親兒子"，前面幾個在某些方面都是"野路子"。

textContent vs innerText

這倆看著很像，但差別大了去了：

<div id="demo">
  <p>第一段</p>
  <p style="display:none">隱藏段</p>
  <script>var x = 1;</script>
</div>

<script>
  const div = document.getElementById('demo');
  
  console.log(div.innerText);    
  // "第一段"  （忽略了隱藏的元素和腳本）
  
  console.log(div.textContent);  
  // "第一段
  // 隱藏段
  // var x = 1;"
  // 所有文本都拿出來了，包括隱藏的、腳本的、甚至換行符
</script>

看出區(qū)別了吧？

innerText：受 CSS 影響，只拿可見文本，會觸發(fā)重排，性能差些，不是標(biāo)準屬性（雖然瀏覽器都支持）
textContent：無視 CSS，拿所有文本節(jié)點內(nèi)容，不觸發(fā)重排，性能更好，是 DOM 標(biāo)準屬性

為什么優(yōu)先用 textContent？

性能更好：不需要等瀏覽器算樣式，不觸發(fā)重排
兼容性：所有現(xiàn)代瀏覽器都支持，包括 IE9+
一致性：不管元素顯不顯示，都能拿到完整文本
安全性：和 innerText 一樣，寫入時會自動轉(zhuǎn)義 HTML

// 安全的用戶輸入渲染
const userInput = "<img src=x onerror=alert(1)>";
const div = document.createElement('div');
div.textContent = userInput;  // 安全，會顯示為純文本

// 對比危險的 innerHTML
// div.innerHTML = userInput;  // 危險！會執(zhí)行腳本！

但要注意換行處理

textContent 會保留源代碼里的換行和空格，有時候這會帶來意外：

<div id="format">
  <p>
    第一行
    第二行
  </p>
</div>

<script>
  const div = document.getElementById('format');
  console.log(div.textContent);  
  // 會包含大量的換行和縮進空格
  // "
  //     第一行
  //     第二行
  //   "
</script>

如果你只需要純文本內(nèi)容，不想要這些格式，可以手動處理一下：

const cleanText = div.textContent.replace(/\s+/g, ' ').trim();

性能和安全怎么選？別光圖快

說了這么多，你可能要問了：那我到底該用哪個？

我的建議是：

場景	推薦方案	原因
插入可信任的 HTML 模板	`innerHTML`	快，方便，但要確保數(shù)據(jù)干凈
顯示用戶輸入的內(nèi)容	`textContent`	安全，自動轉(zhuǎn)義，性能好
獲取用戶可見的文本	`innerText`	符合直覺，但注意性能
替換整個元素	少用 `outerHTML`	容易丟事件監(jiān)聽，坑多
頻繁讀寫文本	`textContent`	不觸發(fā)重排，性能最優(yōu)

安全最佳實踐

如果你必須用 innerHTML 插入動態(tài)內(nèi)容，務(wù)必先做清洗（sanitize）：

// 用 DOMPurify 庫清洗 HTML
import DOMPurify from 'dompurify';

const dirtyHtml = userInput;  // 用戶輸入，不可信
const cleanHtml = DOMPurify.sanitize(dirtyHtml);

element.innerHTML = cleanHtml;  // 現(xiàn)在安全多了

或者如果你只是簡單顯示文本，根本別碰 innerHTML，直接用 textContent：

// 好的做法
element.textContent = userInput;

// 壞的做法（即使你覺得輸入很安全）
element.innerHTML = userInput;

性能優(yōu)化技巧

在循環(huán)里操作 DOM 是大忌，不管是用 innerHTML 還是 textContent：

// 糟糕的做法：1000 次 DOM 操作
for (let i = 0; i < 1000; i++) {
  container.innerHTML += `<div>項目 ${i}</div>`;  // 每次都要解析 HTML
}

// 好一點：先拼字符串，一次性插入
let html = '';
for (let i = 0; i < 1000; i++) {
  html += `<div>項目 ${i}</div>`;
}
container.innerHTML = html;

// 或者用 DocumentFragment（最適合大量 DOM 操作）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `項目 ${i}`;
  fragment.appendChild(div);
}
container.appendChild(fragment);  // 只觸發(fā)一次 DOM 更新

實戰(zhàn)中那些讓人抓狂的翻車現(xiàn)場

理論講完了，來幾個我親身經(jīng)歷或者親眼所見的翻車案例，幫你加深印象。

翻車現(xiàn)場一：改完 innerHTML 事件全沒了

場景：一個待辦事項列表，每個事項有個刪除按鈕。用戶添加新事項時，用 innerHTML 重繪整個列表。

function renderList(items) {
  const list = document.getElementById('todo-list');
  
  // 拼接 HTML
  const html = items.map((item, index) => `
    <li>
      ${item.text}
      <button class="delete" data-index="${index}">刪除</button>
    </li>
  `).join('');
  
  list.innerHTML = html;  // 問題出在這兒！
}

// 一開始綁的事件
document.querySelectorAll('.delete').forEach(btn => {
  btn.addEventListener('click', handleDelete);
});

// 但 renderList 之后，這些按鈕都是新的，事件沒了！

解決辦法：用事件委托，或者別用 innerHTML 全量更新，改用 insertAdjacentHTML 追加，或者直接用框架（React/Vue）管理狀態(tài)。

// 事件委托版本
document.getElementById('todo-list').addEventListener('click', (e) => {
  if (e.target.classList.contains('delete')) {
    const index = e.target.dataset.index;
    handleDelete(index);
  }
});

翻車現(xiàn)場二：用 innerText 讀不到隱藏內(nèi)容

場景：做個搜索功能，要在頁面所有文本里找關(guān)鍵詞。用了 innerText，結(jié)果發(fā)現(xiàn)搜不到那些被 display:none 隱藏的內(nèi)容。

function searchInPage(keyword) {
  const allElements = document.querySelectorAll('body *');
  
  allElements.forEach(el => {
    // 坑：innerText 會跳過隱藏元素
    if (el.innerText.includes(keyword)) {
      el.style.backgroundColor = 'yellow';
    }
  });
}

解決辦法：如果需要搜索所有文本（包括隱藏的），用 textContent：

if (el.textContent.includes(keyword)) {
  // ...
}

翻車現(xiàn)場三：outerHTML 賦值后繼續(xù)操作原元素

場景：想給表格的某一行加樣式，順手用了 outerHTML 包裹一層，然后想給原來的單元格改顏色。

const row = document.querySelector('tr.highlight');
row.outerHTML = `<tbody class="group">${row.outerHTML}</tbody>`;

// 這時候 row 已經(jīng)不在 DOM 里了
row.querySelector('td').style.color = 'red';  // 報錯或沒效果

解決辦法：要么用 innerHTML 配合父元素操作，要么替換后重新查詢：

// 更安全的方式
const parent = row.parentNode;
const wrapper = document.createElement('tbody');
wrapper.className = 'group';
wrapper.innerHTML = row.outerHTML;
parent.replaceChild(wrapper, row);

// 現(xiàn)在操作 wrapper 里的內(nèi)容
wrapper.querySelector('td').style.color = 'red';

翻車現(xiàn)場四：SSR 環(huán)境下用 innerText 直接崩

場景：在 Node.js 服務(wù)端渲染（SSR）時，代碼里用了 innerText。

// 服務(wù)端代碼
const dom = new JSDOM(html);
const element = dom.window.document.getElementById('content');

console.log(element.innerText);  // undefined 或報錯！

原因：innerText 依賴瀏覽器的 CSS 引擎來計算可見性，Node.js 環(huán)境里沒這玩意兒。

解決辦法：用 textContent，它是純 DOM 操作，不依賴渲染引擎：

console.log(element.textContent);  // 正常工作

排查問題的土辦法

遇到內(nèi)容沒更新或者顯示不對，別急著懷疑人生，按這個流程排查：

第一步：console.log 看看值對不對

console.log('innerHTML:', element.innerHTML);
console.log('textContent:', element.textContent);
console.log('innerText:', element.innerText);

有時候你以為賦值成功了，實際上代碼壓根沒跑到那兒。

第二步：打開 Elements 面板肉眼對比

Chrome DevTools 的 Elements 面板能看到真實的 DOM 結(jié)構(gòu)，和你的預(yù)期對比一下：

標(biāo)簽是不是你想要的？
屬性對不對？
有沒有多余的空格或換行？

第三步：檢查是不是被 CSS 影響了

如果 innerText 和 textContent 返回的內(nèi)容不一樣，大概率是 CSS 隱藏了某些元素。檢查下有沒有 display:none 或 visibility:hidden。

第四步：確認元素還在不在 DOM 里

如果操作沒效果，可能是元素已經(jīng)被 outerHTML 替換掉了，或者壓根沒插進 DOM。查一下 element.isConnected 或者 element.parentNode。

開發(fā)小技巧總結(jié)

默認用 textContent：除非有特殊需求，否則優(yōu)先用它。安全、快速、標(biāo)準。
遠離 outerText：就當(dāng)它不存在，省得給自己找麻煩。
innerHTML 前三思：問自己：這個數(shù)據(jù)可信嗎？需要保留 HTML 標(biāo)簽嗎？如果有一個答案是否定的，別用。
動態(tài)插 HTML 前先 sanitize：用 DOMPurify 之類的庫，別拿安全開玩笑?，F(xiàn)在的黑客手段多著呢，防不勝防。
大量 DOM 操作時用 DocumentFragment：比 innerHTML 字符串拼接更可控，比一次次 appendChild 性能更好。
事件綁定考慮委托：特別是配合 innerHTML 動態(tài)更新內(nèi)容時，事件委托能省很多事。
注意內(nèi)存泄漏：用 outerHTML 替換元素后，原來的 DOM 節(jié)點如果還被 JavaScript 變量引用著，就進不了垃圾回收，長時間運行可能內(nèi)存泄漏。

let oldElement = document.getElementById('box');
oldElement.outerHTML = "<div id='box'>新內(nèi)容</div>";

// 這時候 oldElement 還指著原來的節(jié)點，但那個節(jié)點已經(jīng)沒用了
oldElement = null;  // 手動釋放引用，幫助垃圾回收

最后說句掏心窩子的話

別看 innerHTML、innerText 這些 API 都是"古董級"的，現(xiàn)代前端框架底層照樣在用它們。React 的 dangerouslySetInnerHTML，Vue 的 v-html，本質(zhì)上都是包了一層安全檢查的 innerHTML。

搞懂這些原生 API，你不僅能寫出更健壯的原生 JavaScript 代碼，還能看透框架背后的邏輯。比如現(xiàn)在你知道了為什么 React 的 diff 算法要盡量避免直接操作 innerHTML——因為那會銷毀所有子節(jié)點，事件監(jiān)聽全丟，性能開銷巨大。

下次 review 代碼時，看到同事直接拿用戶輸入塞 innerHTML，你可以微微一笑：“哥，要不咱先 sanitize 一下？或者換個 textContent 更踏實？”

前端這行，坑多著呢，但把基礎(chǔ)打扎實了，很多坑其實都能提前避開。希望這篇文章能幫你少踩幾個我當(dāng)年踩過的坑。

到此這篇關(guān)于前端innerHTML和innerText到底有啥區(qū)別及避坑指南的文章就介紹到這了,更多相關(guān)前端innerHTML和innerText區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)

目錄

前言

先認個臉：這幾個家伙到底是干啥的

innerHTML：最常用但也最危險的那個

XSS 漏洞：innerHTML 的致命傷

另一個坑：事件監(jiān)聽會消失

性能小貼士

outerHTML：連自己都不要了？

實際開發(fā)中的坑

讀取 outerHTML 倒是挺有用

innerText：人眼看到的文字才是真的

它到底怎么工作的？

寫入時的特性

但也有坑：性能問題和樣式依賴

outerText：那個幾乎沒人用的"幽靈"

等等，還有個隱藏大佬：textContent

textContent vs innerText

為什么優(yōu)先用 textContent？

但要注意換行處理

性能和安全怎么選？別光圖快

安全最佳實踐

性能優(yōu)化技巧

實戰(zhàn)中那些讓人抓狂的翻車現(xiàn)場

翻車現(xiàn)場一：改完 innerHTML 事件全沒了

翻車現(xiàn)場二：用 innerText 讀不到隱藏內(nèi)容

翻車現(xiàn)場三：outerHTML 賦值后繼續(xù)操作原元素

翻車現(xiàn)場四：SSR 環(huán)境下用 innerText 直接崩

排查問題的土辦法

開發(fā)小技巧總結(jié)

最后說句掏心窩子的話

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)

目錄

前言

先認個臉：這幾個家伙到底是干啥的

innerHTML：最常用但也最危險的那個

XSS 漏洞：innerHTML 的致命傷

另一個坑：事件監(jiān)聽會消失

性能小貼士

outerHTML：連自己都不要了？

實際開發(fā)中的坑

讀取 outerHTML 倒是挺有用

innerText：人眼看到的文字才是真的

它到底怎么工作的？

寫入時的特性

但也有坑：性能問題和樣式依賴

outerText：那個幾乎沒人用的"幽靈"

等等，還有個隱藏大佬：textContent

textContent vs innerText

為什么優(yōu)先用 textContent？

但要注意換行處理

性能和安全怎么選？別光圖快

安全最佳實踐

性能優(yōu)化技巧

實戰(zhàn)中那些讓人抓狂的翻車現(xiàn)場

翻車現(xiàn)場一：改完 innerHTML 事件全沒了

翻車現(xiàn)場二：用 innerText 讀不到隱藏內(nèi)容

翻車現(xiàn)場三：outerHTML 賦值后繼續(xù)操作原元素

翻車現(xiàn)場四：SSR 環(huán)境下用 innerText 直接崩

排查問題的土辦法

開發(fā)小技巧總結(jié)

最后說句掏心窩子的話

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

outerHTML：連自己都不要了？

它到底怎么工作的？

等等，還有個隱藏大佬：textContent

性能和安全怎么選？別光圖快