博客

jQuery html()方法

  • Post category:jquery

当我们使用jQuery选择器选中一个元素后，可以通过调用html()方法来获取或设置该元素的HTML内容。下面是一个完整的”jQuery html()方法”攻略：

什么是jQuery html()方法？

jQuery html()方法用于获得或者设置一个或多个元素的HTML内容。若未传递参数，则返回第一个匹配元素的HTML内容，否则设置每个匹配元素的HTML内容为指定值。

使用jQuery html()方法

使用html()方法获取元素的HTML内容

调用html()方法不需要传递任何参数，将会返回所有选中元素的HTML内容。例如，我们有如下HTML代码：

<div class="my-class">
    <p>Hello, World!</p>
</div>

我们可以通过如下jQuery代码来获取该元素的HTML内容：

var html_string = $(".my-class").html();
console.log(html_string);

以上代码会控制台打印出“

Hello, World!

”，因为这是我们选中元素的HTML内容。

使用html()方法设置元素的HTML内容

调用html()方法并传递文本参数，将会设置所选中的所有元素的HTML内容。例如，我们要将上述示例中选中元素的HTML内容修改为“

Hello, jQuery!

“，我们可以这样：

$(".my-class").html("<p>Hello, jQuery!</p>");

以上代码会将元素的HTML内容设置为“

Hello, jQuery!

”。

示例

示例1

在页面中有如下一个div：

<div id="myDiv">原内容</div>

我们需要修改该div的内容为“新内容”，用jQuery的html()方法可以这样实现：

$("#myDiv").html("新内容");

示例2

当我们的网页加载完成时，需要通过AJAX请求获取新的内容并更新到特定的HTML元素中。以下示例演示如何使用jQuery html()方法来实现这个功能：

<div id="myDiv">原内容</div>

$(document).ready(function(){
    $.ajax({
       url: "http://example.com/newcontent",
       success: function(data){
           $("#myDiv").html(data);
       }
    });
});

以上代码中，我们在页面加载完成后执行AJAX请求，并在请求成功时将返回的内容更新到id为“myDiv”的元素中。

Tags: