jquery中val()、text()、html()和js中value、innerText、innerHTML的区别

最新推荐文章于 2025-04-13 07:37:40 发布

原创最新推荐文章于 2025-04-13 07:37:40 发布 · 628 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

本文详细介绍了JavaScript中DOM操作的相关概念，包括val()与value在处理输入框(input)值时的用法差异，以及text()、innerText与html()、innerHTML在获取和设置HTML标签内容时的不同点。通过实例代码展示了它们的使用场景和效果，帮助开发者更好地理解和应用这些方法。

1、val()与value的区别
val()：带参数为赋值给输入框(input)，不带参数为获取输入框(input)的值
value：获取输入框(input)的值，属于原生js

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(":text").val("hhh");//将hhh赋值给输入框
				var $val = $(":text").val();//获取到输入框的值
				console.info($val);
				console.info(document.getElementById("inp").value);//通过获取id使用原生js获取value的值
			})
		</script>
	</head>
	<body>
		<input type="text" id="inp" />
	</body>
</html>

2、text()和innerText与html()和innerHTML的区别
text()：获取文本的内容，或把文本赋值给html标签
innerText：获取html标签的内容，与文本内容一致
html()：获取标签内部子元素的所有内容，包含标签
innerHTML：获取标签内部子元素的所有内容，包含标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				console.info($("#id").text());//获取div的文本内容
				console.info($("#id")[0].innerText);//获取div的文本内容
				console.info($("#id").html());//获取div里面的所有内容，包含标签
				console.info($("#id")[0].innerHTML);//获取div里面的所有内容，包含标签
			})
		</script>
	</head>
	<body>
		<div id="id">
			123
			456
			<b>12356</b>
		</div>
	</body>
</html>