方法一：直接在标签元素上添加
方法二：是通过js来添加
如图：
介绍：
HTML(Hyper Text Mark-up Language )即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。
暴力方法：
<!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>
参考
事件是类似于：点击时触发、鼠标悬停触发、按键按下触发等能够触发方法的叫事件。方法就是事件发生后触发的逻辑。
html属性是：长度、宽度、样式、名称、id等这些定义html标签的叫做属性。
纯手写，望采纳
