jQuery html()方法 用于获取或者设置元素的内的html内容。html()方法我们一般用于动态渲染元素的内容。

没有参数的情况是获取，有参数的情况是设置。

语法

//获取html内容
$(selector).html()
//设置html内容
$(selector).html(content);
//设置html内容
$(selector).html(function (index, currentcontent))

需要注意的是

  • 设置内容:当您使用此方法设置html内容时，它会覆盖所有匹配元素的内容。
  • 获取内容:使用该方法返回html内容时，返回第一个匹配元素的内容。

参数

参数说明
content用于设置html内容，它是一个包含html标签的内容。
function (index, currentcontent)

它是一个可选参数。它指定了一个函数，该函数返回所选元素的新内容。

  • index:显示集合中元素的索引位置。
  • currentcontent:显示被选元素的当前 HTML 内容。

例子

例1

设置内容

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").html("welcome <b>yxjc123.com</b>");
    });
});
</script>
</head>
<body>
<button>点击修改下面的p标签的元素内容</button>
<p>这是第一个段落.</p>
<p>这是第二个段段.</p>
</body>
</html>

例2

获取内容

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("p").html());
    });
});
</script>
</head>
<body>

<button>返回p元素的内容</button>

<p> 这是第一个 <b>段落</b>.</p>
<p> 这是第一个 <b>段落</b>.</p>
</body>
</html>