jQuery添加元素：掌握DOM操作的必备技巧

在jQuery中，向DOM添加元素是常见操作。你可以使用多种方法实现这一操作，包括append(), prepend(), after(), before()以及add()等。以下是一些具体的例子和代码演示：

1. 使用`append()`添加元素

append()方法在每个匹配元素的内部最后插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 添加元素</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container">
    <p>这是一个段落。</p>
  </div>

  <script>
    $(document).ready(function() {
      $('#container').append('<p>这是追加的新段落。</p>');
    });
  </script>
</body>
</html>

2. 使用`prepend()`添加元素

prepend()方法在每个匹配元素的内部最前面插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 添加元素</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container">
    <p>这是一个段落。</p>
  </div>

  <script>
    $(document).ready(function() {
      $('#container').prepend('<p>这是前置的新段落。</p>');
    });
  </script>
</body>
</html>

3. 使用`after()`添加元素

after()方法在每个匹配元素之后插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 添加元素</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="paragraph">这是一个段落。</p>

  <script>
    $(document).ready(function() {
      $('#paragraph').after('<p>这是在后边插入的新段落。</p>');
    });
  </script>
</body>
</html>

4. 使用`before()`添加元素

before()方法在每个匹配元素之前插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 添加元素</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="paragraph">这是一个段落。</p>

  <script>
    $(document).ready(function() {
      $('#paragraph').before('<p>这是在前边插入的新段落。</p>');
    });
  </script>
</body>
</html>

5. 使用`add()`方法添加元素到jQuery对象集

add()方法允许你将额外的元素添加到现有的jQuery对象集中，从而对这些元素执行相同操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery add() 方法</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="first">第一个div</div>
  <div class="second">第二个div</div>

  <script>
    $(document).ready(function() {
      var firstDiv = $('.first');
      var combinedSet = firstDiv.add('.second');
      combinedSet.css('color', 'red'); // 使两个div的文本颜色变为红色
    });
  </script>
</body>
</html>

6. 使用`html()`方法添加或替换元素内容

html()方法用于获取或设置匹配元素的内容。当传递一个HTML字符串作为参数时，它会替换现有内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery html() 方法</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container">原始内容</div>

  <script>
    $(document).ready(function() {
      $('#container').html('<p>这是新添加的内容，替换了原始内容。</p>');
    });
  </script>
</body>
</html>

7. 使用`wrap()`方法包裹元素

wrap()方法允许你将每个匹配元素包裹在指定的HTML结构中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery wrap() 方法</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p class="content">这是一个段落。</p>

  <script>
    $(document).ready(function() {
      $('.content').wrap('<div class="new-wrapper"></div>');
    });
  </script>
</body>
</html>

8. 使用`unwrap()`方法移除包裹元素

unwrap()方法会移除匹配元素的父元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery unwrap() 方法</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="wrapper">
    <p class="content">这是一个段落。</p>
  </div>

  <script>
    $(document).ready(function() {
      $('.content').unwrap();
    });
  </script>
</body>
</html>

在这个例子中，.content段落的父元素.wrapper将被移除。