js document-操作元素之间的内容

最新推荐文章于 2024-07-18 09:15:00 发布

神奇大叔

最新推荐文章于 2024-07-18 09:15:00 发布

阅读量263

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102890218

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

**获取内容**
	标签名.innerHTML   获取标签内所有内容，包括标签
	标签名.innerText   获取标签内的文本内容，不包括标签

**修改内容**
	标签名.innerHTML="修改值";  会覆盖原内容并且无样式，.innerHTML+="修改值"追加内容，能解析html标签
	标签名.innerText="修改值";  会覆盖，不会解析修改值内的html标签

代码示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>js 操作元素内容和样式</title>
		<style type="text/css">
			#div01{
				width:200px;
				height:200px;
				border:solid 1px orange;
			}
		</style>
		<script type="text/javascript">
			function t1()
			{
				var div=document.getElementById("div01");
				/*获取元素内容*/
				alert(div.innerText);
			}
			function t2()
			{
				var div=document.getElementById("div01");
				div.innerHTML+="<b>啊啊啊</b>";
				alert(div.innerHTML);
			}
			function t3()
			{
				var div=document.getElementById("div01");
				div.innerText+="啊啊啊2";
				alert(div.innerHTML);
			}
			
			
			
			
		</script>
	</head>
	<body>
	<input type="button" value="获取元素内容" onclick="t1()" />
	<input type="button" value="修改元素内容" onclick="t2()" />
	<input type="button" value="修改元素内容2" onclick="t3()" />
		<hr />
		<div id="div01">
			<b>啦啦啦啦</b>
		</div>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js document-操作元素之间的内容

**获取内容** 标签名.innerHTML 获取标签内所有内容，包括标签标签名.innerText 获取标签内的文本内容，不包括标签**修改内容** 标签名.innerHTML="修改值"; 会覆盖原内容并且无样式，.innerHTML+="修改值"追加内容，能解析html标签标签名.innerText="修改值"; 会覆盖，不会解析修改值内的html标签代码示例...
复制链接

扫一扫

专栏目录