Question

How can I use jQuery’s after() to insert data after a div with a certain attribute?

My <div>s go like this

<div id="mod" mod-id="1" mod-user="user1">
Content 1
</div>

<div id="mod" mod-id="2" mod-user="user2">
Content 2
</div>

<div id="mod" mod-id="3" mod-user="user3">
Content 3
</div>

Here, how can I tell jQuery’s after() to insert data after id="mod" and mod-id="2"?

I can tell after() to insert after id="mod", but don’t know how to tell it to do it based on a div‘s data attribute.

Answer 1

IDs must be unique, you can use classes instead and instead of using custom attributes, you can use HTML5 data-* attributes:

<div class="mod" data-mod-id="1" data-mod-user="user1">
  Content 1
</div>

<div class="mod" data-mod-id="2" data-mod-user="user2">
  Content 2
</div>

<div class="mod" data-mod-id="3" data-mod-user="user3">
  Content 3
</div>

Now you can select the element using class and attribute selectors.

$('div.mod[data-mod-id="2"]').after('data');