[英]here to insert element using jQuery
當<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>" );
});
使用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>
$('.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.