如何使用jQuery來修改和讀取元素的HTML

Inner HTML 是一個用來存取和修改一個元素的HTML內容的屬性。在過去的幾年中，jQuery已經成為JS實現內部模板的最受歡迎的工具之一。在本文中，我們將介紹如何使用jQuery來修改和讀取元素的HTML。

jQuery內部範本（Inner HTML）的語法

在概念上，內部範本（Inner HTML）涉及DOM（文件物件模型）的操作。它透過修改DOM實現對元素的操作。以下是修改HTML的基本jQuery語法：

$(selector).html(content)

上面的語法中，selector(選擇器)指向需要修改的元素。 HTML的內容用content變數表示。內容可以是簡單的文字或HTML程式碼。如果傳入的content是函數，則函數的傳回值將會作為HTML的內容。

讓我們透過一些範例來看看jQuery的內部模板（Inner HTML）的使用。

範例1：

以下範例中，我們選取標記為「content」的元素，並將其新的HTML內容設定為「

Welcome to My Website!< /h1>」：

$("#content").html("

Welcome to My Website!

");

範例2：

在以下範例中，我們使用一個JavaScript函數來動態計算標記為content的HTML內容：

#$("#content").html(function(){
 return "Today's date is: " Date();
});

讀取元素的內容（Inner HTML）

除了設定元素的內容，也可以用jQuery來讀取元素的內容（Inner HTML）。以下是讀取元素HTML內容的基本jQuery語法：

$(selector).html()

該語法中，selector(選擇器)指向需要讀取的元素。傳回值將是該元素的HTML內容。接下來，我們看下實例。

範例3：

以下範例中，我們遍歷標記為「list」的所有清單項，並將每一項的HTML輸出到控制台：

$ ("#list li").each(function(){
 console.log($(this).html());
});

總結

#透過這篇文章，我們已經學會如何使用jQuery的Inner HTML標記來讀取和修改一個元素的HTML內容。我們也看到如何使用函數動態計算元素內容。我們希望這篇文章能幫助你更了解jQuery的內部模板，並學習如何使用它來處理HTML。

以上是如何使用jQuery來修改和讀取元素的HTML的詳細內容。更多資訊請關注PHP中文網其他相關文章！