讀取、修改元素的html結構或者元素的文本內容是常見的DOM操作,jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()
我們一起來看看。
.html()方法
獲取集合中第一個匹配元素的HTML內容或設置每一個匹配元素的html內容,具體有3種用法:
1..html() 不傳入值,就是獲取集合中第一個匹配元素的HTML內容
2..html( htmlString ) 設置每一個匹配元素的html內容
3..html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數
注意:
.htm()方法內部使用的是DOM的innerHTML屬性來處理的,所以在設置與獲取上需要注意的一個最重要的問題,這個操作是針對整個HTML內容(不僅僅只是文本內容)
.text()方法
得到匹配元素集合中每個元素的文本內容結合,包括他們的後代,或設置匹配元素集合中每個元素的文本內容爲指定的文本內容。,具體有3種用法:
1..text() 得到匹配元素集合中每個元素的合併文本,包括他們的後代
2..text( textString ) 用於設置匹配元素內容的文本
3..text( function(index, text) ) 用來返回設置文本內容的一個函數
注意:
.text()結果返回一個字符串,包含所有匹配元素的合併文本
.html與.text的異同:
1..html與.text的方法操作是一樣,只是在具體針對處理對象不同。
2..html處理的是元素內容,.text處理的是文本內容。
3..html只能使用在HTML文檔中,.text 在XML 和 HTML 文檔中都能使用。
4.如果處理的對象只有一個子文本節點,那麼html處理的結果與text是一樣的。
5.火狐不支持innerText屬性,用了類似的textContent屬性,.text()方法綜合了2個屬性的支持,所以可以兼容所有瀏覽器。
具體實例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.html()與.text()</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二個元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二個元素</a>
<a>:last-child</a>
</div>
</div>
<h4>顯示通過html方法獲取到的內容</h4>
<p></p>
<h4>顯示通過text方法獲取到的內容</h4>
<p></p>
<script type="text/javascript">
//顯示出html方法獲取到的內容
//.html()是整個html文檔結構
$('p:first').text( $(".first-div").html() )
</script>
<script type="text/javascript">
//顯示出text方法獲取到的內容
//.text()是文本內容的合集
$('p:last').text( $(".first-div").text() )
</script>
<script type="text/javascript">
//通過.text()方法替換文本內容
$(".left a:first").text('替換第一個a元素的內容')
</script>
<script type="text/javascript">
//通過.html()方法替換html結構
$(".left div:first").html('整個div的子節點都被替換了')
</script>
<script type="text/javascript">
//通過.text()的回調,獲取原本的內容,修改,在重新賦值
$(".left a:first").text(function(idnex,text){
return '增加新的文本內容' + text
})
</script>
</body>
</html>
好好感悟!