方法一：直接在标签元素上添加
方法二：是通过js来添加
如图：
介绍：
HTML(Hyper Text Mark-up Language )即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。
第一种方法：两个部分：
javascript部分（相当于给出check（）接口。）：
<script
language="javascript">
function
check()
{
if
{ ……}
else{……}
}
</script>
html
部分（各种调用方法，相当于调用js的check（）接口,当点击后将运行JS函数。也可以将onclick改为其他如：onmouseover)：
<div
onclick="check()"></div>
<form
onsubmit="check()">
<input
type="submit" >
</form>
<button
onclick="check()"></button>
javascript是写事件的，html调用了这个事件。上文中的自定义事件名称check()，也可以自定义为其他，（）圆括号是必须有的。
陕西优就业的老师整理了一种答案，欢迎大家来补充！
暴力方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id='input' />
<div id='main' style="min-height: 100pxword-break: break-all"></div>
<hr />
<button>断开监听</button>
<script>
document.addEventListener('DOMContentLoaded', () =>{
const input = document.querySelector('input')
const main = document.querySelector('#main')
const button = document.querySelector('button')
input.addEventListener('input', e =>{
main.innerHTML += e.target.value
})
const mutationObs = new MutationObserver(mutations =>{
for (const mutation of mutations) {
if (mutation.type === 'childList') {
console.log('你改变了main里的内容')
}
}
})
mutationObs.observe(main, { childList: true })
button.addEventListener('click', () =>{
mutationObs.disconnect()
})
})
</script>
</body>
</html>
参考
