此处使用 jQuery 插入元素

Question

当<button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>时，我想在 id = newDiv 的 div 中插入一个div 。 我怎么能用 jQuery 做到这一点？ 我正在使用after()但它只在按钮之后插入 div。 实际上，我想动态执行此操作，因为可能有多个这样的部分，这是我的 HTML 代码

<div class="row border-bottom g-3  player-song-detail">
    <div class="col-md-1 col-2 my-auto text-center">
      <!-- play button -->
      <button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>
      <input type="text" value="Song Title" placeholder="write song title here" hidden>
    </div>
    <div class="col-md-4 col-8 my-auto" id="newDiv">
      <!-- div should be inserted here -->
    </div>       
  </div>

这是我的 jQuery 代码

 $(".songBtn").click(function(){ 
          $( this ).after( "<div>Test Div</div>" ); 
});

Answer 1

使用append代替after

 $(".songBtn").click(function(){ $( "#newDiv" ).append( "<div>Test Div</div>" ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row border-bottom g-3 player-song-detail"> <div class="col-md-1 col-2 my-auto text-center"> <!-- play button --> <button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i>btn</button> <input type="text" value="Song Title" placeholder="write song title here" hidden> </div> <div class="col-md-4 col-8 my-auto" id="newDiv"> <!-- div should be inserted here --> </div> </div>

Answer 2

 $('.songBtn').click(function(){ $('#newDiv').append('<div></div>'); })

 #newDiv{ border:1px solid red; } #newDiv div{ background:orange; border:1px solid red; width:10px;height:10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="newDiv">This is div with ID newDiv</div> <button class="songBtn btn">this is the button</button>