$(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>
我的问题是,当单击“添加评论”按钮时,会在 <button>Add comment</button>
下创建 div
问题:如何点击“添加评论”按钮并在上面创建 div <div class="comment_panel">
。我无法处理在父 div 上方创建元素
最佳答案
一种方法是使用.parent
函数。您必须对 comment_panel
div 使用 .before
方法。
$('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>
关于javascript - 在父div上方创建div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41651467/