# 添加与删除元素

URL: https://caijiao.org/jquery/03-dom/03-add-remove
Source: docs/jquery/03-dom/03-add-remove.md
Description: 介绍 jQuery 中添加和删除 DOM 元素的方法，包括 append、prepend、after、before、remove 和 empty，帮助开发者灵活操作页面结构。

jQuery 提供丰富的方法用于动态添加和删除页面元素，实现页面内容的灵活更新。

## 添加元素

- `append()` — 在元素内部末尾添加内容
  ```js
  $("ul").append("<li>新项</li>");
  ```

* `prepend()` — 在元素内部开头添加内容

  ```js
  $("ul").prepend("<li>新项</li>");
  ```

* `after()` — 在元素外部后面插入内容

  ```js
  $("h2").after("<p>这是新段落。</p>");
  ```

* `before()` — 在元素外部前面插入内容

  ```js
  $("h2").before("<p>这是新段落。</p>");
  ```

## 删除元素

- `remove()` — 删除匹配的元素及其子元素

  ```js
  $("p").remove();
  ```

- `empty()` — 清空匹配元素的内容，但保留元素本身

  ```js
  $("div").empty();
  ```

## 示例代码

[在线代码演示](/jquery/demos/9.html)