副队长JavaScript教程(52)-DOM操作元素的内容

点此查看 所有教程、项目、源码导航

文章目录

[1. 背景](#1. 背景)
[2. innerText 的使用](#2. innerText 的使用)
[3. innerHTML 的使用](#3. innerHTML 的使用)
[4. innerText 和 innerHTML 核心对比](#4. innerText 和 innerHTML 核心对比)
[5. 表单元素使用 value](#5. 表单元素使用 value)
[6. 追加内容而不是覆盖](#6. 追加内容而不是覆盖)
[7. 小结](#7. 小结)

1. 背景

上一篇我们学会了如何从页面中获取 DOM 元素。

拿到元素之后，最常见的操作就是修改它内部展示的文字内容。

本篇我们学习两个核心属性：innerText 和 innerHTML，用来读取、修改元素内部的内容，同时讲清楚二者的区别和适用场景。

2. innerText 的使用

innerText 用来读取或者设置元素内的纯文本内容 。

它只会识别文字，会自动忽略 HTML 标签，也不会解析标签。

语法：

js 复制代码

// 读取内容
var 文本变量 = 元素.innerText;
// 修改内容
元素.innerText = "新的文本";

示例 HTML：

html 复制代码

<div id="box">我是一段文字</div>

示例 JS 代码：

js 复制代码

var box = document.querySelector("#box");
// 读取元素里面的文本
console.log(box.innerText);
// 修改文本内容
box.innerText = "修改后的文字";

效果：

重点说明：

赋值的时候，如果里面写了 HTML 标签，标签会直接当成普通文字原样显示，不会渲染成网页标签；
innerText 会自动忽略代码里的标签，只提取文字；
它会考虑页面上的换行、空格样式，文本会按照页面展示效果读取。

演示标签原样输出的例子：

js 复制代码

box.innerText = "<b>加粗文字</b>";

页面上不会出现加粗效果，而是直接把 <b>加粗文字</b> 这一串文字展示出来。

3. innerHTML 的使用

innerHTML 用来读取或者设置元素内部的HTML 结构 。

浏览器会解析里面的 HTML 标签，渲染出对应的页面效果。

语法：

js 复制代码

// 读取内容
var html变量 = 元素.innerHTML;
// 修改内容
元素.innerHTML = "带标签的内容";

示例 HTML：

html 复制代码

<div id="box">我是一段文字</div>

示例 JS 代码：

js 复制代码

var box = document.querySelector("#box");
// 读取，会把内部的标签一起读取出来
console.log(box.innerHTML);
// 写入带HTML标签的内容，标签会被解析渲染
box.innerHTML = "<b>加粗文字</b>";

效果：

重点说明：

写入的字符串如果包含合法 HTML 标签，浏览器会解析标签，生成对应的 DOM 节点；
赋值的时候，会直接覆盖这个元素内部原来所有的子节点；
安全提醒：如果内容是用户输入的内容，不要直接使用 innerHTML，容易产生 XSS 安全攻击。

4. innerText 和 innerHTML 核心对比

我们用同一个例子直观感受差别：

html 复制代码

<div id="test"></div>

js 复制代码

var test = document.querySelector("#test");
// innerText
test.innerText = "<span>测试</span>";
// 页面效果：直接显示文字 <span>测试</span>

// innerHTML
test.innerHTML = "<span>测试</span>";
// 页面效果：生成span标签，文字正常渲染

innerText：只处理纯文本，不解析 HTML 标签，适合单纯修改文字；
innerHTML：解析 HTML 标签，可以新增子元素，适合需要动态生成标签结构的场景；
共同点：重新赋值时，都会覆盖元素内部原有的内容。

5. 表单元素使用 value

innerText、innerHTML 适合 div、p、h1 这类普通标签。

像 input、textarea 这类表单输入框，不能用 innerText /innerHTML ，要使用 value 属性读写内容。

示例 HTML：

html 复制代码

<input type="text" id="inp" value="修改前文字">

示例 JS 代码：

js 复制代码

var inp = document.querySelector("#inp");
// 获取输入框里面填写的值
console.log(inp.value);
// 修改输入框里面的内容
inp.value = "修改后文字";

效果：

重点说明：

表单元素的内容保存在 value 里面，这是表单专属属性；
后续做登录、搜索框交互，会大量用到 value。

6. 追加内容而不是覆盖

直接赋值 innerHTML、innerText 会覆盖原有内容。

如果想要在原有内容后面追加，需要先读取原来的内容，再拼接新内容。

html 复制代码

<div id="wrap">原有文字</div>

js 复制代码

var wrap = document.querySelector("#wrap");
// 追加文本
wrap.innerText = wrap.innerText + "，新增的文字";

如果追加带标签的内容：

js 复制代码

wrap.innerHTML = wrap.innerHTML + "<br>新增一行";

7. 小结

innerText：读写纯文本，忽略 HTML 标签，标签作为普通文字显示；
innerHTML：读写 HTML 结构，会解析标签，功能更强，但存在安全风险；
表单输入框 input、textarea，使用 value 读写内容；
直接赋值会覆盖原有内容，想要追加内容需要先读取再拼接；
简单文字修改优先使用 innerText；需要动态生成标签结构时再使用 innerHTML。