CODEWITHSUNDEEP
jquery
test
test

Reputation: 63

Append content to one div only

I am trying to append content to a specific div only without effecting the other divs.

How to append content to one div only without showing the content in other divs? This is a live demo of my code: http://jsfiddle.net/aGC5s/

This is jquery code:

$(".wrapper .button").click(function(event) {
   event.preventDefault();
   $('.wrapper').append('<span>   This content will be added  </span>');
});

Upvotes: 1

Views: 1748

Answers (8)

David
David

Reputation: 56

Here my solution :

$(".wrapper").on("click", ".button", function(event) {
  event.preventDefault();
  $(event.delegateTarget).append('<span>   This content will be added  </span>');
});

Prefer to delegate event on your wrapper node, especially you want to edit it !

Also keep in mind to call off to free memory.

UPDATE

By using bind $(this) refers to the delegated node (thanks to Jack). This solution is better because there is no need to search in the DOM.

$(".wrapper").bind("click", ".button", function(event) {
  event.preventDefault();
  $(this).append('<span>   This content will be added  </span>');
});

Upvotes: 1

palaѕн
palaѕн

Reputation: 73966

Try this:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).parent().append('<span>   This content will be added  </span>');
});

FIDDLE DEMO

Using your code:

$('.wrapper').append('<span>   This content will be added  </span>');

Append the new content to all the div with .wrapper class. We need to firstly get the button in the current scope of the click event using this. After, that we will get its parent using $(this).parent() and then append the new content only to that specific div.

UPDATE

A much better code would be using the closest() here:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('<span>This content will be added</span>');
});

Now, closest('.wrapper') will get the first element that matches the .wrapper selector by testing the element itself and traversing up through its ancestors in the DOM tree and making sure non-immediate descendants are not selected.

Upvotes: 2

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can use this and closest

Code:

$(this).closest('.wrapper').append('<span> This content will be added </span>');

Working fiddle: http://jsfiddle.net/aGC5s/10/

Upvotes: 1

Adil
Adil

Reputation: 148180

You can use $(this) to get the source element and use closest() to get the parent with class wrapper of source of event.

Live Demo

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('<span>   This content will be added  </span>');
});

Upvotes: 2

The Alpha
The Alpha

Reputation: 146249

I think you want this

$(this).closest('div.wrapper').append('<span>This content will be added</span>');

DEMO.

Or, maybe this one

$(this).parent().append('<span>This content will be added</span>');

DEMO.

Upvotes: 0

Alex
Alex

Reputation: 10226

Use $(this) and .parent() See this fiddle

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

http://jsfiddle.net/aGC5s/3/

  $(".wrapper .button").click(function (event) {
      event.preventDefault();

      $(this).closest('.wrapper').append('<span>   This content will be added  </span>');


  });

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

$(this).closest('.wrapper').append('<span>This content will be added</span>');

Demo --> http://jsfiddle.net/aGC5s/6/

Upvotes: 1

Related Questions