版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chengxu_kuangrexintu/article/details/85541496
前言
在日常的开发中，我们会需要获取或者修改html元素内容。那么有什么方法可以完成我们的需求呢？下面分享我学习到的方法。
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"><span>hello world!!!</span></div>
<button id="btn">点击按钮</button>
<script type="text/javascript">
// 需求：获取到id为box的div里面的内容
// 1.找到这个div 2.找到被点击的按钮 3.点击事件必须和btn绑定
var oBox = document.getElementById('box')
var oBtn = document.getElementById('btn')
// 对象.onclick = 事件处理函数
function fn(){
// 获取弹出box里面的内容
// var content = oBox.innerHTML
// alert(content)
// 设置内容
oBox.innerHTML = '<span>html改变内容</span>'
oBox.innerText = 'html改变内容'
// 获取或者设置纯文本内容
alert(oBox.innerText)
// 可以带html标签
alert(oBox.innerHTML)
}
oBtn.onclick = fn
</script>
</body>
</html>
上面的代码中var content = oBox.innerHTML是获取html里面的内容。设置html中的元素内容有innerHTML和innerText和两种方法。
innerHTML和innerText的区别
innerHTML能是被内容里面的html标签；innerText只能设置纯文本内容。