js学习之操作元素内容

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

playboy-jordan

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

阅读量157

点赞数

分类专栏： # JavaScript教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106961901

版权

JavaScript教程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>js操作元素内容学习</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#div01{
				width: 200px;
				height: 200px;
				border: solid 1px orange;
			}			
		</style>
   <!--
	操作元素内容学习：
		获取元素对象
			获取
				元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
				元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签
			修改
				元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析
					元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
		元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。		
   -->
		<!--声明js代码域-->
		<script type="text/javascript">
			//获取元素内容
				function getContext(){
					//获取元素对象
						var div=document.getElementById("div01");
					//获取元素内容
						alert(div.innerHTML);
						alert(div.innerText);
				}
			//修改元素内容
				function updateContext(){
					//获取元素对象
						var div=document.getElementById("div01");
					//修改元素对象内容
						div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>";
				}
				
				function updateContext2(){
					//获取元素对象
						var div=document.getElementById("div01");
					//修改元素对象内容
						div.innerText="<b>你先上，皇军给你殿后，八嘎</b>";
				}
			
			
		</script>
	</head>
	<body>
		<h3>js操作元素内容学习</h3>
		<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="测试修改元素内容--innerText"  onclick="updateContext2()"/>
		<hr />
		<div id="div01">
			<b>皇军，前面有八路的干活。</b>
			<b>皇军，前面有八路的干活。</b>
			
		</div>
	</body>
</html>

在这里插入图片描述

playboy-jordan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js学习之操作元素内容

<html> <head> <title>js操作元素内容学习</title> <meta charset="UTF-8"/>  <style type="text/css"> #div01{ width: 200px; height: 200px; border: solid 1px orange; } </style>
复制链接

扫一扫