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

ゞ浴缸里的玫瑰 2021-07-24 14:09 426阅读 0赞

**获取内容**
    	标签名.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 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript（JS）获取元素、改变元素的内容、修改属性

文档对象模型DOM 文档对象模型DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结

淡淡的烟草味﹌/ 2022年12月21日 13:59/ 0 赞/ 401 阅读

相关 Document以及Document CRUD操作

简单的集群管理 (1) 快速检查集群的健康状况 es提供了一套API，叫做cat api，可以查看es中各种各样的数据 GET \_cat/health ![这里写图片

落日映苍穹つ/ 2022年06月09日 06:21/ 0 赞/ 222 阅读

相关 js_document

1. document 我们常说的dom是指：document object model 1) Document的属性 document.title //设置文档标题等价

旧城等待，/ 2022年05月25日 05:44/ 0 赞/ 151 阅读

相关 jquery的元素的文本内容与HTML内容操作的区别

一应用获取和设置元素的文本内容与HTML内容二代码 <script language="javascript" src="JS/jquery-3.1.1.

布满荆棘的人生/ 2022年05月12日 00:38/ 0 赞/ 242 阅读

相关 jQuery对元素内容操作

jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。元素的内容是指定义元

墨蓝/ 2022年05月12日 00:38/ 0 赞/ 362 阅读

相关 js—操作元素

<table> <tbody> <tr> <td align="left"><font>js添加元素</font></td> </tr>

た入场券/ 2022年04月17日 02:09/ 0 赞/ 212 阅读

相关 js 通过innerHTML写入内容操作元素的文档节点

操作元素文档结构通过innerHTML 增加节点 innerHTML+=innerHTML+"节点标签"

青旅半醒/ 2021年07月25日 02:07/ 0 赞/ 436 阅读

相关 jq 操作元素内容

操作元素内容返回元素的所有内容，包括子标签对象数组.html(); function t1() {

清疚/ 2021年07月25日 02:02/ 0 赞/ 461 阅读

相关 js document-操作元素属性

操作元素固有属性查看获取对象后通过.的方式获取 var inp=document.getElementById("uname")

àì夳堔傛蜴生んèń/ 2021年07月24日 19:35/ 0 赞/ 492 阅读

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

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

ゞ浴缸里的玫瑰/ 2021年07月24日 14:09/ 0 赞/ 427 阅读