jq的html().text()和val()以及和原生方法
本节主要谈谈html() text() val() 用于读/改元素的html结构，元素的文本内容，以及表单元素的value值的方法.
一.jQuery中的text()、html()和val()
html(): 获取任意一个元素的内容,包括内部的标签元素
text(): 匹配元素包含的文本内容组合起来的文本
val(): 匹配表单元素的当前值
例子:
html()方法使用:
<!--html--> <div id="con1">aaa</div> <div id="con2">aaa<span>bbb</span></div>
<div id="con3"></div>
<div id="con4"></div>
<!--script-->
//获取 var con1html = $("#con1").html(); var con2html = $("#con2").html();
console.log("con1html",con1html); //con1html aaa
console.log("con2html",con2html); //con2html aaa<span>bbb</span>
//设置
$("#con3").html('htmlxxx'); //页面显示内容
$("#con4").html('<p>htmlxxx<a>yyy</a></p>'); //页面解析标签显示出来
text()方法使用:
<!--html--> <div id="con1">aaa</div> <div id="con2">aaa<span>bbb</span></div>
<div id="con3"></div>
<div id="con4"></div>
<!--script-->
//获取 var con1text = $("#con1").text(); var con2text = $("#con2").text();
console.log("con1text",con1text); // con1text aaa
console.log("con2text",con2text); //con2text aaabbb
//设置
$("#con3").text('xxx'); //页面显示 xxx
$("#con4").text('xxx<span>yyy</span>'); //页面显示 xx<span>yyy</span>
val()方法:
<!--html--> <input type="text" value="ccc"/> <!--script--> //获取 var con1val = $("input").val(); console.log("con1val",con1val); //con1val ccc //设置 $("input").val('hello'); //文本框显示hello
二.原生js中innerHTML、outerHTML、innerText 、outerText、value
innerHTML:设置或获取HTML语法表示的元素的后代,包括其内部的html标签
outerHTML:获取描述元素（包括其后代）的序列化HTML片段,也可以设置为用从给定字符串解析的节点替换元素。
innerText: 指操作元素中包含的所有文本内容,包括子文档树中的文本
outerText: 指操作元素中包含的所有文本内容,包括子文档树中的文本而且包含调用它的节点;在设置就是替换整个元素(包括子节点)
value: 属性可设置或返回密码域的默认值。获取文本框的值
例子:
innerHTML和outerHTML使用:
<!--html--> <div id="con1">aaa</div> <div id="con2">aaa<span>bbb</span></div>
<div id="con3"></div>
<div id="con4"></div>
<!--script-->
//获取 var con1innerhtml = document.getElementById("con1").innerHTML; var con2innerhtml = document.getElementById("con2").innerHTML; var con1outerhtml = document.getElementById("con1").outerHTML; var con2outerhtml = document.getElementById("con2").outerHTML;
console.log("con1innerhtml",con1innerhtml); //con1innerhtml aaa
console.log("con2innerhtml",con2innerhtml); //con2innerhtml aaa<span>bbb</span>
console.log("con1outerhtml",con1outerhtml); //con1outerhtml <div id="con1">aaa</div>
console.log("con2outerhtml",con2outerhtml); //con2outerhtml <div id="con2"> aaa<span>bbb</span></div>
//设置
document.getElementById("con3").innerHTML = 'AA'; //把文本插入到节点#con3
document.getElementById("con4").innerHTML = 'AA<span>bb</span>'; //把文本'AA<span>bb</span>'插入到节点#con4
document.getElementById("con3").outerHTML = 'AA'; //文本全部替换#con3节点
document.getElementById("con4").outerHTML = 'AA<span>bb</span>'; ////文本全部替换#con4节点
innerText和outerText使用:
<!--html--> <div id="con1">aaa</div> <div id="con2">aaa<span>bbb</span></div> <div id="con3"></div> <div id="con4"></div> <!--script--> //获取 var con1innerText = document.getElementById("con1").innerText; var con2innerText = document.getElementById("con2").innerText; var con1outerText = document.getElementById("con1").outerText; var con2outerText = document.getElementById("con2").outerText;
console.log("con1innerText",con1innerText); //con1innerText aaa
console.log("con2innerText",con2innerText); //con2innerText aaabbb
console.log("con1outerText",con1outerText); //con1outerText aaa
console.log("con2outerText",con2outerText); //con2outerText aaabbb
//设置 document.getElementById("con3").innerText = 'mm1'; //节点#con3把文本'mm1插入到相应节点 document.getElementById("con4").innerText = 'mm1<p>nn</p>'; //节点#con4把文本'mm1<p>nn</p>'插入到相应节点 document.getElementById("con3").outerText = 'mm'; //节点#con3整个替换成mm document.getElementById("con4").outerText = 'mm<p>nn</p>'; //节点#con4整个节点替换成mm<p>nn</p>
value使用:
<input type="text" value="ccc"/> //获取 var con1value = document.getElementsByTagName("input")[0].value; console.log("con1value",con1value); //con1value ccc //设置 document.getElementsByTagName("input")[0].value = 'world'; //文本框显示world
