一、添加元素

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容（仍然在该元素的内部）

    1
    2
    3
    4
    5
    6
    <p>
      <span class="s1">s1</span>
    </p>
    <script>
    $("p").append('<span class="s2">s2</span>');
    </script>

    追加后结果如下

    1
    2
    3
    4
    <p>
      <span class="s1">s1</span>
      <span class="s2">s2</span>
    </p>

  • prepend() - 在被选元素的开头插入内容

    1
    $("p").prepend("在开头追加文本");

  • after() - 在被选元素之后插入内容

    1
    2
    3
    4
    5
    6
    <p>
      <span class="s1">s1</span>
    </p>
    <script>
    $("p").after('<span class="s2">s2</span>');
    </script>

    插入后，结果如下：

    1
    2
    3
    4
    <p>
      <span class="s1">s1</span>
    </p>
    <span class="s2">s2</span>

  • before() - 在被选元素之前插入内容

    1
    $("img").after("在后面添加文本");

二、删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

1.remove() - 删除被选元素（及其子元素）
1
$("#div1").remove();
2.empty() - 从被选元素中删除子元素(元素本身不会被删除)
1
$("#div1").empty();
3.过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class=”italic” 的所有

元素：

1
$("p").remove(".italic");