点击切换帐号登陆
帐号密码登陆

做为纯文本插入到元素中

# 做为纯文本的元素内容

## 1. innerText

* 返回纯文本,html标记不解析
* 文本包括元素所有层级子元素的文本内容
* 忽略空白和script内容

-------------------------------

## 2. textContent

* 返回当前以子节点的所有纯文本
* 与`innerText`相比, 它可以保留空白, 并返回script内容

-------------------------------

## 3. 示例源码

```html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>做为纯文本的元素内容</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p>
peter zhu
<span class="red">讲师</span>
<script>alert('Hello, html.cn')</script>
</p>
</div>

<script>
var div = document.getElementsByTagName('div')[0];

// innerText 不解析html标签
var first = div.firstElementChild;
first.innerText = 'html中文网<span class="red">html.cn</span>';

// innerHTML 解析html标签
var next = first.nextElementSibling;
next.innerHTML = 'html中文网<span class="red">html.cn</span>';


// 
var last = div.lastElementChild;
// 返回当前以子节点的所有纯文本,并保留空白, 还能返回script内容
console.log(last.textContent);
// 返回当前以子节点的所有纯文本,忽略空白和script内容
console.log(last.innerText);
</script>
</body>
</html>

```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号