jQuery增加插進去元素--before、after、append、prepend

2019年8月24日 165次阅读 来源: 賣女孩的小火柴

媒介

近來這個項目，因為某些緣由，用的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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞