在元素之后添加HTML内容

Question

In a CMS I'm developing, the client wants a checkered bottom border underneath all the h2 elements. However, as they're dynamically set via a WYSIWYG editor, there's no way to create static place holders.

The checkered border is just a div with a preset height and width:

<div class="checkers-white-left"></div>

How can I add that after each element? I've tried the CSS :after pseudo, but that didn't work, as I knew it wouldn't.

Short of modifying the data being sent and stored in the server, is there a way to do this?

Answer 1

You need to give all the elements a distinguishing class, so you can select them all. Then you can do:

$(".elementClass").after("<div class='checkers-white-left'/>");