jQuery html函数|极客教程

jQuery html函数

在jQuery中，html()函数是用来设置或返回匹配元素的内容。它可以用来修改元素的HTML内容，也可以用于获取元素的HTML内容。这个函数非常灵活，可以让我们轻松地操作HTML元素的内容。

语法

html()函数的语法如下：

$(selector).html(content)

selector：jQuery选择器，用来选择要操作的元素。
content：可选参数，用来设置要设置的HTML内容。

设置HTML内容

要设置元素的HTML内容，只需要传递一个包含HTML标记的字符串作为参数即可。例如，我们可以通过以下代码将一个段落的内容更改为”Hello, World！”：

$("#myParagraph").html("<b>Hello, World!</b>");

在这个示例中，我们选择了ID为“myParagraph”的段落元素，并将其内容设置为”Hello, World！”，并用粗体标签<b>包裹。

获取HTML内容

如果不传递参数给html()函数，则它会返回匹配元素的HTML内容。例如，我们可以通过以下代码获取一个div元素的HTML内容，并将其输出到控制台：

console.log($("#myDiv").html());

假设我们有一个HTML结构如下：

<div id="myDiv">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</div>

运行上面的代码会输出：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

注意事项

当使用html()函数设置元素的内容时，它会将之前的内容完全替换掉。如果需要在原有内容的基础上添加新的内容，可以使用append()函数。
当获取空元素的HTML内容时，html()函数会返回一个空字符串。
当我们选择多个元素时，html()函数只会作用于第一个匹配元素。

示例

设置和获取HTML内容

让我们来看一个完整的示例，演示如何使用html()函数设置和获取HTML内容：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery html() Function Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
         $(document).ready(function(){ // 设置HTML内容$ ("#myParagraph").html("<b>Hello, World!</b>");

            // 获取HTML内容
            console.log($("#myDiv").html());
        });
    </script>
</head>
<body>
    <div id="myDiv">
        <p id="myParagraph">This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </div>
</body>
</html>

在这个示例中，我们先使用html()函数将ID为“myParagraph”的段落的内容更改为”Hello, World！”，然后使用console.log()打印出ID为“myDiv”的div元素的HTML内容。