CODEWITHSUNDEEP
javascriptjquery
Michael Chuuuuuuuuuuuuuuuuuuuu
Michael Chuuuuuuuuuuuuuuuuuuuu

Reputation: 59

How to append a div to another div

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>

Upvotes: 0

Views: 107

Answers (2)

Woodrow
Woodrow

Reputation: 2832

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>

Upvotes: 1

dukedevil294
dukedevil294

Reputation: 1305

Assuming that all your other HTML structure is similar to what you've demoed:

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

Upvotes: 1

Related Questions