jQuery.html() 方法

2018-11-23 16:47 更新

jQuery.html() 方法

jQuery 選擇器 jQuery 選擇器

定義和用法

html()函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的DOM元素內(nèi)的html內(nèi)容。

該函數(shù)的用途相當(dāng)于設(shè)置或獲取DOM元素的innerHTML屬性值。

該函數(shù)屬于jQuery對象(實例)。

語法

jQueryObject.html( [ htmlString ] )

參數(shù)

參數(shù)描述
htmlString可選/String/Function類型用于設(shè)置的html字符串。

如果沒有指定htmlString參數(shù)，則表示獲取第一個匹配元素的html內(nèi)容；如果指定了htmlString參數(shù)，則表示設(shè)置所有匹配元素的html內(nèi)容。

jQuery 1.4 新增支持：參數(shù)htmlString可以為函數(shù)。html()將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù)，函數(shù)中的this將指向?qū)?yīng)的DOM元素。

html()還會為函數(shù)傳入兩個參數(shù)：第一個參數(shù)就是該元素在匹配元素中的索引，第二個參數(shù)就是該元素當(dāng)前的html內(nèi)容。函數(shù)的返回值就是需要為該元素設(shè)置的html內(nèi)容。

如果參數(shù)htmlString不是字符串或函數(shù)類型，則會被轉(zhuǎn)換為字符串類型( toString() )。如果參數(shù)為null或undefined，則將其視作空字符串("")。

返回值

html()函數(shù)的返回值是String/jQuery類型，返回值的實際類型取決于html()函數(shù)所執(zhí)行的操作。

如果html()函數(shù)執(zhí)行的是設(shè)置操作，將返回當(dāng)前jQuery對象本身。如果執(zhí)行的是獲取操作，將返回第一個匹配元素的html內(nèi)容，該值為字符串類型。

實例

實例

以下面這段代碼為例：

/* HTML代碼 */
<div id="n1">
    <p id="n2">Hello</p>
    <p id="n3">
        W3Cschool
        <span id="n4">學(xué)技術(shù)，從W3Cschool開始！</span>
        <span id="n5"></span>
    </p>
</div>

/* jQuery代碼 */
<script>
var $n2 = $("#n2");
alert( $n2.html() ); // Hello
// 設(shè)置n2的html內(nèi)容
$n2.html( '<strong>Hello W3Cschool</strong>' );

var $n3 = $("#n3");
alert( $n3.html() );
/*
CodePlayer
<span id="n4">學(xué)技術(shù)，從W3Cschool開始！</span>
<span id="n5"></span>
*/

// 清空所有span元素的html內(nèi)容(將html內(nèi)容設(shè)為"")
$("span").html( "" );

// 將所有p元素的html內(nèi)容改為"第<em>N</em>個p元素，id為this.id"
// 這里的N表示該元素在所有匹配元素中的序號(1、2、3……)
// this.id是該元素的id屬性值
$("p").html( function(index, currentHtml){
// 函數(shù)內(nèi)的this指向當(dāng)前迭代的p元素
return "第<em>" + (index + 1) + "</em>個p元素，id為" + this.id;
});
</script>

嘗試一下 ?

點擊 "嘗試一下" 按鈕查看在線實例

jQuery 選擇器 jQuery 選擇器

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號