Quiero insertar un div dentro del div que tiene id = newDiv cuando se hace clic en <button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button> . ¿Cómo puedo hacer esto con jQuery? Estoy usando after() pero solo inserta el div después del botón. en realidad, quiero hacer esto de forma dinámica, ya que podría haber varias secciones como esta aquí está mi código 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>aquí está mi código jQuery
$(".songBtn").click(function(){ $( this ).after( "<div>Test Div</div>" ); });use append en lugar de 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>