JavaScript >> Javascript 文檔 >  >> Tags >> Date

在 JavaScript 中更新 DOM 元素的文本內容

在上一篇文章中,我們研究瞭如何在 vanilla JavaScript 中更新 DOM 元素的 HTML 標記。在這個簡短的教程中,您將學習如何獲取和設置元素的文本。

JavaScript 提供了兩個屬性,innerTexttextContent , 獲取和設置 HTML 元素及其所有子節點的文本內容。

如果您設置新值 innerTexttextContent ,所有子節點將被刪除並替換為包含指定字符串的單個文本節點。

假設我們有以下 <p> 元素:

<p id="intro">My name is <b>John Doe</b>!</p>

下面的例子展示瞭如何獲取文本內容 上述元素的:

// grab element
const elem = document.querySelector('#intro');

// get text content
console.log(elem.innerText);
// OR
console.log(elem.textContent);

// My name is John Doe!

替換現有的文本內容 完全,只需為 innerText 設置一個新值 :

// replace existing text
elem.innerText = 'Hey there! I am Atta';

innerText 屬性與 textContent 非常相似 財產。不過也有一定的區別:

  • innerText 返回文本內容所有元素除了 <script><style> 元素,而 textContent 返回 all 的文本內容 元素。
  • innerText 不能不能 用於獲取被 CSS 隱藏的元素的文本內容,但 textContent 可以使用。

閱讀下一篇: 如何使用 JavaScript 創建 DOM 元素


Tutorial JavaScript 教程
  1. 將 Ionic React 添加到現有的 React 項目

  2. PublishTo.Dev:安排在 dev.to 上發布文章

  3. Node.js 中的雙重選擇:發送確認電子郵件

  4. 所以你有一個創業的想法——這裡是如何建立它

  5. Deno 與節點 | Node.js 死了嗎? Deno 2021 的未來?

  6. 新課程:使用 GraphQL、Laravel 和 Vue 構建應用程序

  7. JavaScript 中的條件:If、Else If 和 Else

  1. 使用 Ionic 和 React 創建 Electron 桌面應用程序:分步教程和故障排除

  2. 所有瀏覽器都支持 querySelector 嗎?

  3. D3 - 按下按鈕時動態更改樹中節點的文本

  4. 來自工廠函數的 ES6 原生 Promise

  5. 使用 Vue 動態組件創建可重用按鈕

  6. Promise.any 簡介

  7. 建立你自己的虛擬捲軸 - 第一部分

  1. Google Charts Dashboard:帶有 MoMA 藝術風格的教程🖼

  2. 10 個帶有 jQuery 教程和插件的 XML

  3. 在哪裡聲明你的 jQuery 函數

  4. JavaScript 面試問題 #22:`toString` 在 JavaScript 中是如何工作的?