jQuery中html()、val()、text()的区别; javascript中innerHTMl、innerText、outHTML的区别

shadow_yn

墨衍会员 · AI 创作全网分发码龄12年

关注

原创最新推荐文章于 2023-09-22 14:47:23 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

ubuntu18.04安装xenomai3.1（百分百成功版） ubuntu18.04安装xenomai3.1（百分百成功版），保姆级教学！！！阅读详情

今天在使用javascript时，用到了value值，忽然想到了jQuery中的html()、val()和text()，就查看了一下参考资料，整理下他们之间的差异，方便以后查看。

1.val():用来读取或者设置修改匹配的value值。(如果是select的多选项，则返回相匹配的数组)

$("#input1").val();//获取value值
$("#input1").val("Single2"); //设置value值
$("#select1").val();//test1,test2

2.text():用来读取或者设置匹配元素的文本内容，（如果元素中包含元素，则只会读取该元素的文本内容，不会读取标签，这是和html()最大的区别）

$("p").text();///读取所有段落的文本内容
$("p").text("abcdefg");///设置所有段落的文本内容为abcdefg

3.html():用来读取或者设置第一个匹配元素的内容（即标签内包含的所有内容,能够读取到所包含的标签）

$("div").html();//读取第一个div中所包含的所有内容
$("div").html("<p>abcdefg<p>");//设置第一个div中所包含的所有内容

说到jQuery的读取设置标签内容，很容易牵扯到JavaScript的innerHTML、outHTML、innerText：
1.innerHTML:这个是w3c标准的属性，能够读取或者设置元素的内容，jQuery中的html()功能是根据原生js的innerHTML实现的，不过因为innerHTML自身的兼容性问题，所以html()(如果innerHTML存在问题，则通过append()添加字符串)和innerHTML还有一定的差异性

var ss=document.getElementById("test");
var ss_html=ss.innerHTML;//获取到的结果和html()一致ss.innerHTML="abcdefg";

innerHTML在IE6-9中动态给table添加内容会直接报错，这是因为col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects中的innerHTML只能读取，可以通过append来修改内容

2.innerText：获取设置匹配元素内的文本内容，这个不是w3c标准的属性，会有浏览器兼容性问题，在火狐下是不支持这个属性的，不过可以用textContent来替代

ss.innerText="abcdefg";
function getInnerText(element) {
    return (typeof ele.textContent == "string") ? element.textContent : element.innerText;
}

3.outHTML:获取或者设置匹配元素的html（包含匹配的标签，不仅仅是标签所包含的内容），这个不是w3c的标准属性，存在浏览器兼容性（ff 不支持该属性）

收录于

jQuery-js

标签

#javascript #jQuery

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

单细胞数据导入实战：Read10X函数常见报错与解决方案本文针对单细胞转录组分析中Read10X函数数据导入的常见问题，提供了详细的实战解决方案。重点解析了因文件路径错误、压缩文件未解压、版本命名不符及内存不足导致的报错，并给出了检查路径、正确解压、重命名文件、调整参数及优化内存等具体操作步骤，帮助用户高效完成单细胞数据导入，为后续分析奠定坚实基础。阅读详情

jQuery中html()、val()、text()的区别; javascript中innerHTMl、innerText、outHTML的区别

相关推荐