erstellen div oben Mutter div

Question

$(document).on("click", "button", function() { 
 
    $(this).before('<div class="comment_box_all"><div class="comment_user"></div></div>') 
 
    
 
}); 
 

 
$('button').click(function(){ 
 
    var content = document.createElement("span"); 
 
    content.innerHTML = $(".textarea").val().replace(/(\n|\r|\r\n)/g, '<br>'); 
 
    $('.comment_user').append(content); 
 
});

.comment_panel 
 
{ 
 
    width:450px; 
 
    height:100px; 
 
} 
 
textarea 
 
{ 
 
    width:300px; 
 
    height:80px; 
 
    } 
 
button 
 
{ 
 
    position:absolute; 
 
    top:10px; 
 
    left:330px; 
 
} 
 
.comment_box_all 
 
{ 
 
    width:450px; 
 
    height:100px; 
 
    background-color:#999; 
 
    border:1px solid #000; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment_panel"> 
 
    <textarea class="textarea" placeholder="Add text..."></textarea> 
 
    <button>Add comment</button> 
 
</div>

Mein Problem ist, wenn Klicke Schaltfläche ‚Kommentar hinzufügen‘ erstellen div unter <button>Add comment</button>

Frage: wie man die Klick-Taste tun ‚Kommentar hinzufügen‘ und div erstellen über <div class="comment_panel">. Ich kann nicht mit create-Element über Eltern div umgehen

Answer 1

Eine Methode ist, .parent Funktion zu verwenden. Sie müssen .before Methode für comment_panel div. Verwenden

$('button').click(function(){ 
 
    $(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>') 
 
    var content = document.createElement("span"); 
 
    content.innerHTML=$(".textarea").val().replace(/(\n|\r|\r\n)/g, '<br>'); 
 
    $('.comment_user').append(content); 
 
});

.comment_panel 
 
{ 
 
    width:450px; 
 
    height:100px; 
 
} 
 
textarea 
 
{ 
 
    width:300px; 
 
    height:80px; 
 
    } 
 
button 
 
{ 
 
    
 
    top:10px; 
 
    left:330px; 
 
} 
 
.comment_box_all 
 
{ 
 
    width:450px; 
 
    height:100px; 
 
    background-color:#999; 
 
    border:1px solid #000; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment_panel"> 
 
    <textarea class="textarea" placeholder="Add text..."></textarea> 
 
    <button>Add comment</button> 
 
</div>