无涯教程-jQuery - html( )方法函数

**jQuery 教程**

**HTML() 方法函数**

在 jQuery 中，`html()` 方法用于设置或获取 HTML 元素的内容。这个方法非常有用，因为它可以让我们轻松地修改元素的内容，而不需要直接操作 DOM。

###1. 设置 HTML 内容要使用 `html()` 方法设置 HTML 内容，我们只需传递一个字符串参数给该方法，表示新的 HTML 内容。例如：

javascript// 获取一个元素var $div = $('#myDiv');

// 设置新内容$div.html('<p>Hello, World!</p>');

在上面的例子中，我们首先获取一个 ID 为 `myDiv` 的元素，然后使用 `html()` 方法设置其内容为一个 `

` 元素，包含文本 "Hello, World!"。

###2. 获取 HTML 内容如果我们想获取某个元素的当前 HTML 内容，可以使用 `html()` 方法而不传递任何参数。例如：

javascript// 获取一个元素var $div = $('#myDiv');

// 获取当前内容var currentHtml = $div.html();

console.log(currentHtml); // 输出：<p>Hello, World!</p>

在上面的例子中，我们首先获取一个 ID 为 `myDiv` 的元素，然后使用 `html()` 方法获取其当前 HTML 内容，并将结果输出到控制台。

###3. 使用 html() 方法的注意事项当使用 `html()` 方法时，需要注意以下几点：

* 如果传递了一个字符串参数，则会覆盖元素的所有内容。
* 如果没有传递任何参数，则会返回元素的当前 HTML 内容。
* 如果元素不存在，则 `html()` 方法将返回 `undefined`。

###4. 示例代码下面是一个完整的示例代码，演示了如何使用 `html()` 方法设置和获取 HTML 内容：

javascript// 获取一个元素var $div = $('#myDiv');

// 设置新内容$div.html('<p>Hello, World!</p>');

// 获取当前内容var currentHtml = $div.html();

console.log(currentHtml); // 输出：<p>Hello, World!</p>

// 修改内容$div.html('<h1>Hello, World!</h1>');

// 再次获取当前内容currentHtml = $div.html();

console.log(currentHtml); // 输出：<h1>Hello, World!</h1>

在上面的示例代码中，我们首先设置一个元素的 HTML 内容，然后获取其当前 HTML 内容。接着，我们修改了该元素的 HTML 内容，并再次获取其当前 HTML 内容。

###5. 总结`html()` 方法是 jQuery 中非常有用的方法之一，它可以让我们轻松地设置或获取 HTML 元素的内容。通过使用这个方法，我们可以实现各种功能，例如动态修改页面内容、创建交互式元素等。在实际开发中，需要谨慎使用 `html()` 方法，以避免出现意外的行为。

**相关函数**

* `text()`:用于设置或获取 HTML 元素的文本内容。
* `val()`:用于设置或获取表单元素的值。
* `attr()`:用于设置或获取 HTML 元素的属性值。

**参考资料**

* jQuery 文档：[ />* W3Schools：[