Append content to one div only

Question

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

Live demo: http://jsfiddle.net/aGC5s/ – test May 27 '13 at 15:44 — test, May 27 '13 at 15:44

Adil · Answer 1 · 2013-05-27T15:50:42.680

2

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

edited May 27 '13 at 15:50

answered May 27 '13 at 15:45

Adil

146,340
25
209
204

but the clicked wrapper is not always :eq(0) – Alex May 27 '13 at 15:45

palaѕн · Accepted Answer · 2013-05-27T16:23:46.503

2

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.

edited May 27 '13 at 16:23

answered May 27 '13 at 15:46

palaѕн

72,112
17
116
136

2

This assumes `.wrapper` is always the parent, but the selector used allows non-immediate descendants. – Ja͢ck May 27 '13 at 16:02
ya, better is to use .parents().first() or closest() for less static html code – A. Wolff May 27 '13 at 16:06
There is one issue, once I have clicked the button twice or more the content keeps repeating example(This content will be added This content will be added This content will be added). You can test it by click the button more than once. http://jsfiddle.net/aGC5s/7/ – test May 27 '13 at 16:24

score 1 · Answer 3 · answered May 27 '13 at 15:46

1

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

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

answered May 27 '13 at 15:46

Adil Shaikh

44,509
17
89
111

score 1 · Answer 4 · answered May 27 '13 at 15:46

1

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

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

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


  });

answered May 27 '13 at 15:46

A. Wolff

74,033
9
94
155

score 1 · Answer 5 · edited May 23 '17 at 12:12

1

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/

edited May 23 '17 at 12:12

Community

1
1

answered May 27 '13 at 15:52

Irvin Dominin

30,819
9
77
111

score 1 · Answer 6 · edited May 23 '17 at 12:06

1

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

edited May 23 '17 at 12:06

Community

1
1

answered May 27 '13 at 15:57

David

56
4

`$(this)` should be the same as `event.delegateTarget`. – Ja͢ck May 27 '13 at 16:04
`$(this)` is `event.currentTarget` when using `.on()` (http://api.jquery.com/on/#event-handler) ! But using bind is better because in that case, `$(this)` is the delegated node. – David May 27 '13 at 16:35
Doh, never mind; `event.delegateTarget` points to `.wrapper` of course, which is correct :) +1 – Ja͢ck May 27 '13 at 16:42
Thanks! Your first comment was right about assuming the direct parent `.wrapper` wasn't a good idea. But I think looking backwards is not so good too. – David May 27 '13 at 16:50

score 0 · Answer 7 · answered May 27 '13 at 15:47

0

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

answered May 27 '13 at 15:47

Alex

9,911
5
33
52

This assumes `.wrapper` is always the parent, but the selector allows non-immediate descendant elements that match `.button`. – Ja͢ck May 27 '13 at 16:03

score 0 · Answer 8 · answered May 27 '13 at 15:50

0

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.

answered May 27 '13 at 15:50

The Alpha

143,660
29
287
307

Append content to one div only

8 Answers8

UPDATE