jQuery如何设置元素的HTML内容？

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

jQuery设置元素HTML内容

jQuery 提供多种方法设置元素的 HTML 内容，常见的方法如下：

1. html() 方法

html() 方法直接设置或获取元素的 HTML 内容。

语法：

html(content)

参数：

• content: 要设置的 HTML 内容。可以是字符串、函数或 jQuery 对象。

用法：

// 设置 HTML 内容
$("p").html("<b>Hello World!</b>");

// 获取 HTML 内容
var html = $("p").html();

2. text() 方法

text() 方法仅设置或获取元素的文本内容，不会设置 HTML 标记。

语法：

text(text)

参数：

• text: 要设置的文本内容。可以是字符串、函数或 jQuery 对象。

用法：

// 设置文本内容
$("p").text("Hello World!");

// 获取文本内容
var text = $("p").text();

3. val() 方法

val() 方法设置或获取表单元素的值，如文本框、单选按钮和复选框。

语法：

val(value)

参数：

• value: 要设置的值。可以是字符串、函数或 jQuery 对象。

用法：

// 设置文本框的值
$("input[type=text]").val("John Doe");

// 获取文本框的值
var value = $("input[type=text]").val();

4. append() 方法

append() 方法在选定元素的末尾添加内容。

语法：

append(content)

参数：

• content: 要添加的内容。可以是字符串、函数或 jQuery 对象。

用法：

// 在段落末尾添加内容
$("p").append("<b>New Text</b>");

5. prepend() 方法

prepend() 方法在选定元素的开头添加内容。

语法：

prepend(content)

参数：

• content: 要添加的内容。可以是字符串、函数或 jQuery 对象。

用法：

// 在段落开头添加内容
$("p").prepend("<b>New Text</b>");

6. after() 方法

after() 方法在选定元素的后面插入内容。

语法：

after(content)

参数：

• content: 要插入的内容。可以是字符串、函数或 jQuery 对象。

用法：

// 在段落后面插入内容
$("p").after("<div>New Content</div>");

7. before() 方法

before() 方法在选定元素的前面插入内容。

语法：

before(content)

参数：

• content: 要插入的内容。可以是字符串、函数或 jQuery 对象。

用法：

// 在段落前面插入内容
$("p").before("<div>New Content</div>");

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