jQuery如何获取HTML内容？

这篇文章将为大家详细讲解有关jQuery如何获取HTML内容？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 获取 HTML 内容的方法

jQuery 提供了多种方法来获取 HTML 内容，包括：

1. html() 方法

html() 方法用于获取或设置选定元素的 HTML 内容。

获取内容：

// 获取元素 id 为 "content" 的 HTML 内容
const content = $("#content").html();

设置内容：

// 将元素 id 为 "content" 的 HTML 内容设置为 "New content"
$("#content").html("New content");

2. val() 方法

val() 方法用于获取或设置表单元素（input、textarea、select）的值。

获取值：

// 获取输入框 id 为 "username" 的值
const username = $("#username").val();

设置值：

// 将输入框 id 为 "username" 的值设置为 "admin"
$("#username").val("admin");

3. text() 方法

text() 方法用于获取或设置选定元素的文本内容，不包括 HTML 标签。

获取文本：

// 获取元素 id 为 "content" 的文本内容
const text = $("#content").text();

设置文本：

// 将元素 id 为 "content" 的文本内容设置为 "New text"
$("#content").text("New text");

4. attr("html") 方法

attr("html") 方法用于获取或设置元素的 HTML 属性。

获取 HTML 属性：

// 获取元素 id 为 "content" 的 HTML 属性
const htmlAttr = $("#content").attr("html");

设置 HTML 属性：

// 将元素 id 为 "content" 的 HTML 属性设置为 "New value"
$("#content").attr("html", "New value");

5. prop("innerHTML") 方法

prop("innerHTML") 方法与 html() 方法类似，用于获取或设置元素的 HTML 内容，但它直接操作 DOM 属性，而不是使用 jQuery 的包装器。

获取 HTML 内容：

// 获取元素 id 为 "content" 的 HTML 内容
const innerHTML = $("#content").prop("innerHTML");

设置 HTML 内容：

// 将元素 id 为 "content" 的 HTML 内容设置为 "New content"
$("#content").prop("innerHTML", "New content");

选择器

上述方法都可以与 jQuery 选择器结合使用，以获取或设置特定元素的 HTML 内容。例如：

// 获取所有带有 "p" 标签的 HTML 内容
const pContent = $("p").html();

注意：

• 这些方法获取的是字符串形式的 HTML 内容。
• 对于复杂的内容，建议使用 html() 方法，因为它保留了 HTML 结构。
• text() 方法只获取文本内容，不包含 HTML 标签。

以上就是jQuery如何获取HTML内容？的详细内容，更多请关注编程学习网其它相关文章！