一、innerHTML与innerText介绍
innerHTML和innerText都是元素的属性,通过修改这个元素的属性可以达到修改元素内容的目的
二、innerHTML与innerText的区别
1.innerHTML
InnerHTML获取或设置指定元素标记内的HTML内容,从元素标记的开始到元素标记的结束 (包括HTML标记)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML</title>
</head>
<body>
<div id="test">
<!-- 注释:测试注释 -->
hello <strong>world</strong>
</div>
<script>
console.log(document.getElementById('test').innerHTML)
// 打印返回值:
// <!-- 注释:测试注释 -->
// hello <strong>world</strong>
// 所以:innerHTML表示元素所有的后代html。
// 该范围包括文本节点,注释节点,元素节点等内容。
// 在读写该属性时,我们可以获取一个字符串,这个字符串包括元素内部的内容,
// 包含空格,换行,注释。
</script>
</body>
</html>
2.innerText
InnerText获取或设置指定元素标记内的文本的值,从元素标记的开始到元素标记的结束(不包括HTML标记)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerText</title>
</head>
<body>
<div id="test">
<!-- 注释:测试注释 -->
hello <strong>world</strong>
</div>
<script>
console.log(document.getElementById('test').innerText)
// 打印返回值:hello wordl
//所以:
// innerText表示元素所有的文本内容,包括文本节点,子元素和后代元素的文本节点
// 只包括内容,不包括注释空格等
</script>
</body>
</html>
三、思考:childNodes和children
childNodes |
|
children |
|