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>

<!--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