jQuery.parseHTML() 介绍

封面图 • 2025-12-16 • jQuery

`jQuery.parseHTML()` 是 jQuery 提供的一个方法，用于将一个 HTML 字符串解析为 DOM 元素数组。它在处理动态生成的 HTML 内容时非常有用，尤其是在需要将字符串形式的 HTML 转换为实际的 DOM 元素进行操作时。

---

## 📌 语法

```javascript
jQuery.parseHTML(htmlString, [context], [keepScripts])
```

### 参数说明：

1. **`htmlString`**（必需）  
   一个包含 HTML 标签的字符串，例如：`"<div>Hello</div>"`。

2. **`context`**（可选）  
   一个 DOM 元素或 jQuery 对象，表示解析的上下文。默认是 `document`。  
   示例：`jQuery.parseHTML(html, document.body)`。

3. **`keepScripts`**（可选）  
   一个布尔值，表示是否保留 `<script>` 标签。  
   默认为 `false`（不保留），如果设为 `true`，则会将 `<script>` 标签也作为元素返回。

---

## ✅ 示例

### 示例 1：基本用法

```javascript
var html = "<div>Hello <strong>World</strong></div>";
var elements = jQuery.parseHTML(html);

console.log(elements); // 输出一个包含 div 和 strong 元素的数组
```

### 示例 2：带上下文

```javascript
var html = "<p>This is a paragraph.</p>";
var context = document.getElementById("container");
var elements = jQuery.parseHTML(html, context);

// 将解析后的元素添加到指定容器中
$(context).append(elements);
```

### 示例 3：保留 `<script>` 标签

```javascript
var html = "<script>alert('Hello');</script>";
var elements = jQuery.parseHTML(html, null, true);

console.log(elements); // 包含 script 元素
```

---

## ⚠️ 注意事项

- `jQuery.parseHTML()` 不会执行脚本（即使 `keepScripts` 设置为 `true`），也不会自动绑定事件。
- 它只是将 HTML 字符串转换为 DOM 元素，不会将它们插入到页面中。要插入元素，可以使用 `.append()`, `.prepend()`, `.insertAfter()` 等方法。
- 如果你只需要解析 HTML 并将其插入页面，可以直接使用 `$(htmlString)`，因为 jQuery 会自动调用 `parseHTML` 来处理字符串。

---

## 🔄 与原生 `DOMParser` 的区别

虽然 jQuery 提供了 `parseHTML` 方法，但现代浏览器也支持原生的 `DOMParser` API：

```javascript
var parser = new DOMParser();
var doc = parser.parseFromString(htmlString, "text/html");
var elements = doc.body.childNodes;
```

不过，`jQuery.parseHTML()` 更适合在 jQuery 项目中使用，因为它更简洁、兼容性更好，并且能更好地与 jQuery 集合操作结合使用。

---

## 🧠 总结

| 方法 | 功能 | 是否执行脚本 | 是否返回 DOM 数组 |
|------|------|----------------|-------------------|
| `jQuery.parseHTML()` | 解析 HTML 字符串为 DOM 元素数组 | ❌ | ✅ |
| `$(htmlString)` | 创建 jQuery 对象，内部调用 parseHTML | ❌ | ✅ |
| `DOMParser` | 原生解析 HTML | ❌ | ✅ |

---

如果你有具体的使用场景或问题，欢迎继续提问！