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

时间：2022-06-12 15:22:58

今天在使用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 不支持该属性）
标签：

相关文章