Question

＆＃13;

$(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);
});

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

我的问题是点击按钮＆＃39;添加评论＆＃39;在<button>Add comment</button>

下创建div

问题：如何点击按钮＆＃39;添加评论＆＃39;并创建高于<div class="comment_panel">的div。我无法处理父div上方的create元素

Answer 1

一种方法是使用.parent函数。您必须对.before div使用comment_panel方法。

$('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>

在父div之上创建div

1 个答案: