document操作元素的内容_document输入-优快云博客

本文链接：https://blog.youkuaiyun.com/wyqwilliam/article/details/103540192

<html>
	<head>
		<title>document操作元素内容</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			#showdiv{
				border: solid 1px;
				width: 200px;
				height: 200px;
			}
		</style>
		<!--
			document操作元素内容:
				获取元素对象
				获取内容：
					元素对象名.innerHTML //返回元素中的所有内容(HTML标签+文本信息)
					元素对象名.innerText //返回元素中的所有文本内容，不包括HTML元素标签
				修改内容：
					元素对象名.innerHTML="新的内容"//会覆盖原有内容，新的内容中的HTML元素会被解析
					元素对象名.innerText="新的内容"//会覆盖原有内容，新的内容中的HTML元素不会被解析
			注意：
				不是每个HTML元素都有内容的，一般双标签中的信息称为HTML元素的内容。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//获取元素内容
				function getEleCon(){
					//获取元素对象
					var div=document.getElementById("showdiv");
					//获取元素内容
						alert(div.innerHTML);
						alert(div.innerText);
				}
			//修改元素内容
				function operEleCon(){
					//获取元素对象
					var div=document.getElementById("showdiv");
					//修改元素内容
						//div.innerHTML="<u>努力不一定成功，但是不努力一定会很安逸</u>";
						div.innerText="<u>努力不一定成功，但是不努力一定会很安逸</u>";
				}
		</script>
	</head>
	<body>
		<h3>document操作元素内容</h3>
		<input type="button" id="" value="测试获取" onclick="getEleCon()"/>
		<input type="button" id="" value="测试修改" onclick="operEleCon()"/>
		<hr />
		<div id="showdiv">
			<b>尚学堂不是学习的终点，而是学习的起点</b>
			<b>尚学堂不是学习的终点，而是学习的起点</b>
		</div>
	</body>
</html>