CODEWITHSUNDEEP
javascriptjqueryappend
kevin Peter
kevin Peter

Reputation: 13

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

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');

Upvotes: 0

Views: 49

Answers (3)

gurvinder372
gurvinder372

Reputation: 68393

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

Upvotes: 1

Nirali
Nirali

Reputation: 1786

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

Upvotes: 0

Ozal Zarbaliyev
Ozal Zarbaliyev

Reputation: 638

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

Upvotes: 0

Related Questions