jQuery里设置获取文本内容

285 阅读1分钟

text();方法
获取和设置文本内容

	<body>
		<input type="button" value="获取" id="getBtn" />
		<input type="button" value="设置" id="setBtn" />
		<div id="div1">我是一个div1标签
			<p>我是一个p1标签
				<span>span1</span>
			</p>
		</div>
		<div id="div1">我是一个div2标签
			<p>我是一个p2标签
				<span>span2</span>
			</p>
		</div>		
	</body>

获取文本

text();方法不给参数
会获取到这个标签中的所有文本,包括后代元素的文本

	<script>
		$(function(){
			$('#getBtn').click(function(){
				console.log($('#div1').text())
				console.log($('div').text());
			});
		});
	</script>

点击获取按钮,结果:

1.png

设置文本

text();方法给参数,参数内容就是文本内容
会覆盖他原来的内容,如果设置的文本中包含标签,是不会把这个标签给解析出来的

	<script>
		$(function(){
			$('#setBtn').click(function(){
				$('#div1').text('修改了div1的内容');
				//$('div').text('修改了div的内容');
			});
		});
	</script>

点击设置按钮,结果:

2.png
如果把$('#div1').text('修改了div1的内容');修改为$('#div1').text('修改了div1的内容<a>超链接</a>');
点击设置按钮,结果:

4.png
$('div').text('修改了div的内容');这句代码打开
点击设置按钮,结果:

3.png