How to append div using $(this) selector in Jquery?

Question

I have two div tag which is created dynamically at runtime. That tag class name is MainFolder

<div class="MainFolder" style="padding-left: 20px; width: 200px; height: 23px;">
    <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br>
</div>
<div class="MainFolder" style="padding-left: 20px; width: 200px; height: 23px;">
    <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br>
</div>

On click function in Jquery

$(document).on('click', '.MainFolder', function () {

    $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());
    //$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
    //$(this).appendTo('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>');
});

I want to create the div tag under the selected element.

I am trying to make div element under the one of div tag where user clicked

If I try this below code. It is creating on both folder. But when I use $(this),its not working

$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo('.MainFolder');

Answer 1

You need to append to $(this) instead of the parent element of clicked MainFolder

  $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));

Also, remove the height style from the MainFolder

Demo

 $(document).on('click', '.MainFolder', function() { $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br> </div> <div class="MainFolder" style="padding-left: 20px; width: 200px;"> <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br> </div> 

Edit

Looks like you are making an ajax call after on click, so save a reference to $(this)

$(document).on('click', '.MainFolder', function() {
  var $self = $(this);
  $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($self);
});

Answer 2

have checked at jsfiddle. it works.

   $('body').on('click', '.MainFolder', function(){
        var html = '<div id="outer">Outer Div Content<div id="inner">'+
        'Inner Div Content</div></div>';
        var self = $(this);
      self.parent().append(html);
    })

Answer 3

Change From

$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());

to

$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));