What sort of selector would be I need in order to insert after the parent (divouter) of the test3 class in the example below? Thanks.

<div class='divouter'>
    <div class='divinner'>
        <input class=test1></input>
    </div>
</div>
<div class='divouter'>
    <div class='divinner'>
        <input class=test2></input>
    </div>
</div>
<div class='divouter'>
    <div class='divinner'>
        <input class=test3></input>
    </div>
</div>
<div class='divouter'>
    <div class='divinner'>
        <input class=test4></input>
    </div>
</div>

What sort of selector would be I need in order to insert after the parent (divouter) of the test3 class in the example below? Thanks.

<div class='divouter'>
    <div class='divinner'>
        <input class=test1></input>
    </div>
</div>
<div class='divouter'>
    <div class='divinner'>
        <input class=test2></input>
    </div>
</div>
<div class='divouter'>
    <div class='divinner'>
        <input class=test3></input>
    </div>
</div>
<div class='divouter'>
    <div class='divinner'>
        <input class=test4></input>
    </div>
</div>

• javascript
• jquery
• dom
• dom-manipulation

3 Answers 3

You could use the $.after() method:

$(".test3").closest(".divouter").after("<div>Foo</div>");

Or the $.insertAfter() method:

$("<div>Foo</div>").insertAfter( $(".test3").closest(".divouter") );

.divouter:parent

I think you want the "after()" method:

$('input.test3').focus(function() {
   $(this).closest('div.divouter').after('<div>Hi!</div>');
});