前端笔记44——获取或者修改div内容

最新推荐文章于 2024-08-04 14:27:56 发布

原创最新推荐文章于 2024-08-04 14:27:56 发布 · 926 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #获取或者修改div内容 #JavaScript #innerHTML #innerText

前端专栏收录该内容

93 篇文章

订阅专栏

本文介绍如何使用innerHTML和innerText方法获取和设置HTML元素内容。通过示例代码展示了这两种方法的区别，innerHTML可以保留HTML标签，而innerText则只显示纯文本。

前言

在日常的开发中，我们会需要获取或者修改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和两种方法。