如何使用jQuery更改元素的HTML内容？ - 打野赵怀真 - 沸点 - 掘金

11月前

如何使用jQuery更改元素的HTML内容？
### 核心方法
使用jQuery更改HTML内容主要通过`.html()`方法实现，该方法既可获取也可设置元素内容。

### 基本用法
```javascript
// 获取内容（返回第一个匹配元素的HTML）
const content = $('#element').html();

// 设置内容（所有匹配元素都会更新）
$('#element').html('<strong>新内容</strong>');
```

### 安全注意事项
1. **防XSS**：直接插入用户输入内容时需转义
```javascript
// 危险做法（可能引发XSS攻击）
$('#element').html(userInput);

// 安全做法（使用text()或转义库）
$('#element').text(userInput);
```

2. **性能优化**：批量操作时使用文档片段
```javascript
const fragment = document.createDocumentFragment();
// ...构建内容
$('#container').empty().append(fragment);
```

### 链式操作示例
```javascript
$('#box')
.empty() // 清空现有内容
.addClass('active') // 添加样式
.html('<p>动态内容</p>'); // 插入新内容
```

### 最佳实践
- 修改前先用`.empty()`清空更安全
- 大量DOM操作时考虑使用`.detach()`
- 优先使用`.text()`处理纯文本内容

> 注意：jQuery 3.x版本中`.html()`返回的`<script>`标签不会执行

展开

今天学到了