如何将div附加到另一个div

Question

Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.

<div class="appendOuter">
 <?php 
     foreach($query as $data){
     $id = $data['ID'];
     $initialAccess = $data['Access'];
     if(strlen($initialAccess) > 3){
     echo   '
          <div class="box" >
            <input type="hidden" value='.$id.' class="ID">
             <textarea class="Access">'.$Access.'</textarea>
         </div>';
             }
         }
 ?>
    <div class="text-center">
       <button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
       <span class="glyphicon glyphicon-plus"></span>
       </button>
      </div>      
</div>

My javascript to append a new div

<script>
function addMorediv(index){
  var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
  element.appendTo('.appendOuter');      
 }
  </script>

Answer 1

假设所有其他HTML结构与您演示的结构类似：

element.appendTo($(this).parent().parent());

Answer 2

Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea (s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.

 $('.btn-add').on('click', function() { var $box = $(this).parent().parent().find('.box:last'); var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>"); $element.appendTo($box); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="appendOuter"> <!-- Assume your PHP generated 3 ".row" div rows in for loop --> <div class="row"> <div class="box"> <input type="hidden" value="1" class="ID"> <textarea class="Access">1</textarea> </div> <div class="text-center" style="padding:10px;"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus">Add +</span> </button> </div> </div> <div class="row"> <div class="box"> <input type="hidden" value="2" class="ID"> <textarea class="Access">2</textarea> </div> <div class="text-center" style="padding:10px;"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus">Add +</span> </button> </div> </div> <div class="row"> <div class="box"> <input type="hidden" value="3" class="ID"> <textarea class="Access">3</textarea> </div> <div class="text-center" style="padding:10px;"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus">Add +</span> </button> </div> </div> </div>