方法一
document.write('')- 概念：将文本输出到body之中 当文本中包含HTML标签时会被解析
- 优点：当输出的文档需要解析HTML标签时书写起来非常方便，直接书写就可以被解析
- 缺点：文本只会输出到之前的位置，不能为单独某个DOM输出文本且永远只能做追加操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>
<h2>
</h2>
</div>
<script>
// 方法一(不方便，功能局限大)
// document.write(``)
// 只能将文本内容追加到</body>前面的位置
// 文本中包含的标签全部会被解析
document.write(`helloWorld`)
document.write(`<h2>helloWorld</h2>`)
</script>
</body>
</html>
方法二
- innerText （推荐）
- MDN定义：HTMLElement接口的innerText属性表示节点及其后代的“呈现”文本内容。
- 概念：为元素设置标签之间的文本内容
- 特点：可以通过获取某个DOM属性的文本内容对其进行设置，不能对内容中的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>Document</title>
</head>
<body>
<h2>
<span>我是一个文本</span>
</h2>
<script>
// 获取元素
let span = document.querySelector('span')
console.log(span);
// 为span元素设置文本内容
span.innerText = '<p>我是innerText设置的文本内容 你猜我前后的p标签会不会被解析</p>'
</script>
</body>
</html>
方法三
- innerHTML (推荐）
- MDN定义：innerHTML属性获取或设置元素中包含的HTML或XML标记。
- 概念：将文本内容添加或者更新到任意标签位置
- 特点：可以通过获取某个DOM属性的文本内容对其进行设置，文本中包含的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>Document</title>
</head>
<body>
<h2>
<span>我是一个文本</span>
</h2>
<script>
// 方法三
// innerHTML=''
// 特点：innerHTML可以为页面中的元素设置文本内容且可以解析html标签结构。
// 获取元素
let h3 = document.querySelector('h3')
h3.innerHTML = '<p>h3的内被innerHTML修改辣</p>你猜猜前后的p标签会不会被解析'
</script>
</body>
</html>
innerText和innerHTML
innerText和innerHTML本质上都是对DOM元素的内容进行添加或者修改，前者不会解析HTML标签，输入输出是字符串 而后者是<标签内的文本，输入输出到该DOM内部纯HTML的代码。 两者使用场景看需求选用，同时两者对form表单并不适用(表单需要适用特有的属性value进行设置文本内容，输入输出的是字符串）
