jquery: add html after a group of divs

Question

I have something like this: ...

<div id="d120" >content</div>
<div id="d123" >content</div>
<div id="d112" >content</div>
<div id="d145" >content</div>
<div id="d134" >content</div>
//Insert here hello world

<div id="bla" >asd</div>
<div id="footer" >asd</div>

anybody knows how to insert html after all the divs that have id like d+number

Answer 1

add another div with an id and then just change the html for that element $('#id').html('html');

unless that will break your page layout?

Answer 2

Try this:

$(function(){
  $('div[id^="d"]:last').after('<div>Hello World</div>');
});

Note: As suggested by Nick Craver, this would match any div whose id starts with d but i think that's what you have to resort to as per your html markup.

Answer 3

$("div[id^=d]:last").after("some html");

or:

$("some html").insertAfter("div[id^=d]:last");

Answer 4

If the format doesn't have anything between those divs and #bla like your example, here's a safer approach using .before() (since div[id^=d] would match <div id="doodlesticks"> as well).

$("#bla").before("<b>Hi There</b>");

Update: Since you said it's possible to give them a class, I'd do that, so give the content divs a class="content" and use this jQuery:

$(".content:last").after("<b>Hi There</b>");

Answer 5

This will safely test for elements whose id ends with a number, instead of any id that start with "d".

$('div[id]').filter(function() {
    return /\d+$/.test($(this).attr('id'));
}).last().after(...my html...);