jq 操作元素内容

清疚 2021-07-25 02:02 460阅读 0赞

操作元素内容
    
    	**返回元素的所有内容，包括子标签**
    		对象数组.html();
    				function t1()
    			{
    				var showdiv=$("#showdiv");
    				alert(showdiv.html());
    			}
    			
    	**返回元素的内容，不包括子标签**
    		对象数组.text();
    				function t4()
    			{
    				var showdiv=$("#showdiv");
    				alert(showdiv.text());
    			}
    			
    	**解析标签**
    	
    		覆盖元素内容
    			对象数组.html("修改内容");  会解析标签
    			会覆盖原有内容
    					function t2()
    				{
    					var showdiv=$("#showdiv");
    					showdiv.html("<b>哇啊啊啊</b>")
    				}
    				
    		追加新内容
    			对象数组.html(对象数组.html()+"添加内容");
    					function t3()
    				{
    					var showdiv=$("#showdiv");
    					showdiv.html(showdiv.html()+"呜啦啦");
    				}
    				
    	**不解析标签**
    	
    		对象数组.text("修改内容")
    		对象数组.text(对象数组.text()+"添加内容")

代码示例:

<html>
    	<head>
    		<title>jq 操作元素的内容和样式</title>
    		<meta charset="utf-8"/>
    		<script type="text/javascript" charset="UTF-8" src="js/jquery-3.4.1.js"></script>
    		
    		<script type="text/javascript">
    			
    			function t1()
    			{ 
    				//获取元素对象
    				var showdiv=$("#showdiv");
    				//获取元素内容
    				alert(showdiv.html());
    			}
    			function t2()
    			{ 
    				var showdiv=$("#showdiv");
    				showdiv.html("<b>哇啊啊啊</b>")
    			}
    			function t3()
    			{ 
    				var showdiv=$("#showdiv");
    				showdiv.html(showdiv.html()+"呜啦啦");
    			}
    			function t4()
    			{ 
    				var showdiv=$("#showdiv");
    				alert(showdiv.text());
    			}
    		</script>
    		<style type="text/css">
    
    		</style>
    	</head>
    	<body>
    		<h3 align="center">jq 操作元素的内容和样式</h3>
    		<input type="button" name="" id="" value="操作内容" onclick="t1()"/>
    		<input type="button" value="修改内容" onclick="t2()"/>
    		<input type="button" value="追加内容"  onclick="t3()"/>
    		<input type="button" value="内容2" onclick="t4()" />
    		
    		<hr />
    		<div id="showdiv">
    			<b>嗷嗷嗷嗷</b>
    			
    		</div>
    			 
    			
    			
    		</div>
    	</body>
    </html>