欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

val();html();.text()区别

程序员文章站 2022-04-14 13:42:07
对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容） 对于innerText属性: 从起始位置到终止位置的内容, 但它去除Html标签 （只在IE里面有） 注意：inn ......

对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容）

对于innerText属性: 从起始位置到终止位置的内容, 但它去除Html标签 （只在IE里面有）

注意：innerHTML 属性只在js里面有，在Jquery里面是没有的，如果要使用则用$("#t").html("sdsds"); or  $("#t")[0].innerHTML="sdsds";

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText

<html>
<head>
<script type="text/javascript">
function getInnerHTML() {
alert(document.getElementById("tr1").innerHTML);
alert(document.getElementById("tr1").innerText);
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1"><td>Firstname</td><td>Lastname</td></tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />
</body>
</html>
运行结果:
<td>Firstname</td><td>Lastname</td>
 
Firstname Lastname
 
2

jQuery封装的方法html,text,val

.html()用为读取和修改元素的HTML标签
.text()用来读取或修改元素的纯文本内容
.val()用来读取或修改表单元素的value值。

 

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert( $("#test").text());      结果：这是段落中的粗体文本
});
$("#btn2").click(function(){
alert( $("#test").html());    结果：这是段落中的<b>粗体</b>文本
});
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>

上一篇： JavaScript-简单的页面输入控制

下一篇： Es6 Generator函数

推荐阅读