js中innerText，value，innerHTML以及jquery的append和html，val，text的区别

最新推荐文章于 2026-02-21 04:26:05 发布

原创最新推荐文章于 2026-02-21 04:26:05 发布 · 1.3k 阅读

1 ·

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

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文详细介绍了JavaScript和jQuery中innerText、value、innerHTML属性，以及jQuery的append、html、val和text方法的区别。在jQuery中，append用于在元素结尾插入内容，html用于获取或设置元素的内HTML，val用于处理输入元素的value值，text用于获取或设置文本内容。而在HTML DOM中，innerText获取纯文本，innerHtml获取包括标签的完整内容，value则用于读取对象的value属性。

-------------------jQuery元素-------------------------

append：在被选元素的结尾（仍然在内部）插入指定内容,如果内部已有元素后自动加到已存在内容的后边；

html：返回或设置被选元素的内容 (inner HTML)。

val：返回或设置被选元素的value值。

text：设置或返回被选元素的文本内容。

上代码

-----------返回内容情况

 <body>
	<p id="p1"><span>出来</span></p>
	<div id="mydiv" style="width: 200px;hight:200px;background-color: yellow"><span>哈哈哈</span></div>
	<input id="myinput" type="text" value="测试">
  </body>
  <script type="text/javascript">
  
	var myinput = $("#myinput").val();
	var mydiv = $("#mydiv").html();
	var p1 = $("#p1").text();
	console.log("-myinput-",myinput);
	console.log("-mydiv-",mydiv);
	console.log("-p1-",p1);
  </script>

控制台的结果：

-----------设置内容情况

 <body>
	<p id="p1"><span>出来</span></p>
	<div id="mydiv" style="width: 200px;hight:200px;background-color: yellow"><span>哈哈哈</span></div>
	<input id="myinput" type="text" value="测试">
  </body>
  <script type="text/javascript">
  
	var myinput = $("#myinput").val("测试你个大头鬼");
	var mydiv = $("#mydiv").html("<div style='width:100px;hight:100px;background-color:blue'>hello world</div>");
	var p1 = $("#p1").text("出来你个大波浪");
	console.log("-myinput-",myinput);
	console.log("-mydiv-",mydiv);
	console.log("-p1-",p1);
  </script>

结果：

-------------------html dom元素-------------------------

innerText：获取标签之间的纯文本信息，会将标签过滤掉
innerHtml:获取标签之间的内容，包括标签和文本信息

value：读取对象的value 属性

<body>
  <p id="p1"><span>出来</span></p>
  <input id="myinput" type="text" value="测试">
</body>
<script type="text/javascript"> 
  var p1 = document.getElementById("p1");
  var myinput = document.getElementById("myinput");
  console.log("-p11-",p1.innerText);
  console.log("-p12-",myinput.value);
  console.log("-p13-",p1.innerHTML);
</script>

控制台打印的内容：