jQuery .append outside tag

Question

I'm completely new to jQuery. To be honest it is my first few days.

And there is my first question.

$(document).ready(function() {
    $('span.head-span').parent().addClass('head-h').append('<div class="clx" />')
});

As a result I have this

<h1 class="head-h"><span class="head-span">This is Some Heading</span><div class="clx"/></h1>

What do I need to do in jQuery so my .clx will appear after . like this

<h1 class="head-h"><span class="head-span">This is Some Heading</span></h1><div class="clx"/>

Thank you very much in advance.

Answer 1

You should be able to do this using after() instead of append()

$('span.head-span').parent().addClass('head-h').after('<div class="clx" />')

Answer 2

If you want the div after the header, don't append it, use the after method:

$('h1').after('<div class="clx" />');