HTML - DOM innerText 属性

HTML DOM 的innerText 属性用于直接获取（读取）或更改（更新）网页上 HTML 元素内的可见文本内容。

当您访问 element.innerText 时，它会检索该元素的当前内容。如果您为其分配新内容（例如，element.innerText = "new_content"），它会将现有内容更新为新的 HTML。

"innerText" 属性类似于innerHTML 属性，但它们之间存在一些细微差别。"innerText" 属性检索或设置元素的可见文本内容，不包括 HTML 标签，而 "innerHTML" 检索或设置元素内部的 HTML 标记，包括标签。了解更多

以下交互式示例演示了innerText 方法在不同场景下的用法：

HTML DOM innerText

欢迎来到 Tutorialspoint

您来对地方学习了……

语法

以下是 HTML DOM 的innerText（读取可见内容）属性的语法：

element.innerText

要使用新内容更新现有的可见 HTML 内容，请使用以下语法：

element.innerText = text

其中 "text" 是元素的文本内容。

参数

此属性不接受任何参数。

返回值

此属性返回一个字符串，其中包含元素的可见文本内容，不包括隐藏元素（如<script> 或<style>）内的文本。

示例 1：读取当前文本内容

以下是 HTML DOM innerText 属性的基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerText</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the button to display the current paragraph text.</p>
<p id="myParagraph">Welcome to Tutorialspoint</p>
<button onclick="displayText()">Display Text Content</button>
<script>
   function displayText() {
      const paragraph = document.getElementById('myParagraph');
      alert("The text of this paragraph is: " + paragraph.innerText);
   }
</script>
</body>
</html>

以上程序读取了段落 ("p") 元素的可见内容。

示例 2：更改（更新）文本内容

以下是 HTML DOM innerText 属性的另一个示例。我们使用此属性来更新 "div" 元素的现有可见内容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the innerText of p element</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to change (update) the Paragraph text.</p>
<p id="myParagraph">Initial text content.</p>
<button onclick="changeText()">Change Text</button>
<script>
   function changeText() {
      const paragraph = document.getElementById('myParagraph');
      paragraph.innerText = 'Updated text using innerText property!';
   }
</script>
</body>
</html>

以上程序更新（更改）了 "p" 元素的内容。

示例 3：操作嵌套元素

此示例展示了使用innerText 属性操作嵌套元素。

最初，它以嵌套方式显示 "父文本" 和 "嵌套文本"，但单击按钮后，会将父 <div> 的文本更改为 "新父文本"，而嵌套<div> 的文本保持不变：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerText</title>
<style>
   #parent{
       border: 1px solid #000;
       padding: 10px;
   }
   #child{
       margin-top: 10px;
       border: 1px dashed #000;
       padding: 5px;
   }
   button{
       padding: 8px 12px;
       margin: 5px 0px;
   }
</style>
</head>
<body>
<p>Click the below button to change "Parent text" to 'New Parent Text'.</p>
<div id="parent">
Parent text
<div id="child">
Nested text
</div>
</div>
<button onclick="changeNestedText()">Change Parent Text</button>
<script>
   function changeNestedText() {
      const parentElement = document.getElementById('parent');
      parentElement.innerText = 'New parent text';
   }
</script>
</body>
</html>

支持的浏览器

属性
innerText	是	是	是	是	是

html_dom_element_reference.htm

打印页面