前端学习——js操作元素的内容

最新推荐文章于 2022-08-02 11:19:27 发布

野生小米椒

最新推荐文章于 2022-08-02 11:19:27 发布

阅读量356

点赞数

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/88916765

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作元素内容学习</title>
		<!--
			操作元素内容学习：
			     获取元素对象
			       获取
			         元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
			         元素对象名.innerText//返回当前元素对象的文本内容，不包括HTML标签
			        修改
			         元素对象名.innerHTML="新的值"//会将原有内容覆盖，并且HTML标签会被解析
			         元素对象名.innerHTNL=元素对象名.innerHTML+"新的值"//追加效果	
			         元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示	
			         -->
			         
		<script type="text/javascript">
		//获取元素内容
		function getContext(){
		    var div=document.getElementById("showdiv");
		    alert(div.innerHTML);
		    alert(div.innerText);
		}
		//修改元素内容
		function updateContext(){
			var div=document.getElementById("showdiv");
			div.innerHTML="<b>呵呵呵</b>";
		}
		//追加元素内容
		function zhuijiaContext(){
			var div=document.getElementById("showdiv");
			div.innerHTML=div.innerHTML+"你好，我是追加的";
		}
		//测试修改元素内容
		function updateContext2(){
			var div=document.getElementById("showdiv");
			div.innerText="<b>嘻嘻嘻</b>";
		}
		//测试修改元素内容---追加
		function updateContext3(){
			var div=document.getElementById("showdiv");
			div.innerText=div.innerText+"<b嘻嘻嘻</b>";
		}
		</script>
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px orange;
			}
		</style>
		
	</head>
	<body>
		<input type="button" name="" id="" value="测试获取元素内容---innerHTML&&innerText" onclick="getContext()"/>
		<input type="button" name="" id="" value="测试修改元素内容---innerHTML" onclick="updateContext()"/>
		<input type="button" name="" id="" value="测试追加元素内容---innerHTML" onclick="zhuijiaContext()"/>
		<input type="button" name="" id="" value="测试修改元素内容---innerText" onclick="updateContext2()"/>
		<input type="button" name="" id="" value="测试追加元素内容---innerText" onclick="updateContext3()"/>
		
		<hr />
		<div id="showdiv">
			<b>你好，我是div</b>
			
		</div>
		
		
	</body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——js操作元素的内容

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作元素内容学习</title> <!-- 操作元素内容学习：获取元素对象获取元素对象名.innerHTML/...
复制链接

扫一扫