jQuery添加插入元素--before、after、append、prepend

2019年9月14日 183次阅读 来源: 卖女孩的小火柴

前言

最近这个项目，由于某些原因，用的js框架是年迈的jQuery。项目中免不了需要添加DOM的操作，自己也老是搞混JQ添加DOM的方法，虽然简单，但是偶尔还是要去看文档用法，觉得文字记忆有点不模糊，于是觉得结合图片来总结一下。

jQuery添加元素的方法

1.before() – 在被选元素之前插入内容

2.after() – 在被选元素之后插入内容

3.prepend() – 在被选元素的开头插入内容

4.append() – 在被选元素的结尾插入内容

添加元素方法图示

《jQuery添加插入元素--before、after、append、prepend》

demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>JQ插入元素</title>
</head>
<style>
  .container {
    width: 60%;
    margin: 0 auto;

  }

  #content {
    background: #f2f2f2;
    padding: 20px;
    text-align: center;
  }

  .btn-group {
    margin-top: 20px;
  }

  p {
    color: #f00;
    font-weight: bold;
  }

</style>

<body>
  <h1>JQ插入元素---before、after、append、prepend</h1>
  <div class="container">
    <div id="content">
      <div class="text">我是内容一</div>
    </div>
    <div class="btn-group">
      <button>在content前面插入元素（外部）</button>
      <button>在content后面插入元素（外部）</button>
      <button>在text前面插入元素（内部）</button>
      <button>在text后面插入元素（内容）</button>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    var $container = $('#content');
    var $test1 = $('.text');
    var btns = $('button');
    var $h2 = $('h2');
    var $ele1 = $('<p>我是插入的内容1</p>')
    var $ele2 = $('<p>我是插入的内容2</p>')
    var $ele3 = $('<p>我是插入的内容3</p>')
    var $ele4 = $('<p>我是插入的内容4</p>')
    btns.on('click', function () {
      var index = $(this).index(); //获取点击元素的索引
      switch (index) {
        case 0:
          // 在content前面插入元素（外部）
          $container.before($ele1)
          break;
        case 1:
          // 在content后面插入元素（外部）
          $container.after($ele2)
          break;
        case 2:
          // 在text前面插入元素（内部）
          $container.prepend($ele3); //父元素添加子元素
          // $ele3.prependTo($container)   //子元素加入到父元素中
          break;
        case 3:
          // 在text后面插入元素（内容）
          $container.append($ele4)
          // $ele3.appendTo($container)   //子元素加入到父元素中
          break;
      }
    })

  </script>
</body>

</html>
    原文作者：卖女孩的小火柴
    原文地址: https://segmentfault.com/a/1190000015148969
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞