Move a paragraph after a div with .after (jQuery)

Question

I am currently playing around with Codeacademy and I received a task, telling me to move a new paragraph, after a div. Heres what I did:

$('#one').after('<p>this is jquery</p>');

Now I want to move the new paragraph after another div, called #two, however, I am supposed to use .after, so it tells me. How would I go about moving the new paragraph, after the #two id.

Edit: Sorry, I am a beginner at this. Somehow, the stuff doesn't work in jsfiddle for me, I am most likely doing something wrong. However I will leave a couple of screenshots below:

http://imgur.com/a/WmlkV

Answer 1

html

<div id="one">one</div>
<div id="two">two</div>

javascript

$('#one').after('<p>this is jquery</p>');
$('#two').after($("#one + p"));

example

Answer 2

As you haven't set up the p as a separate variable I would do it like this:

$('#two').after($('#one').next('p'));

http://jsfiddle.net/PJff8/

My preferred way would be to set up the p as a variable and then you can move as much as you want without having to reselect it:

var p = $('<p>this is jquery</p>');
$('#one').after(p);
$('#two').after(p);

http://jsfiddle.net/PJff8/1/

Answer 3

If I understand correctly; you can use the next() in conjunction with insertAfter(), like so:

$('#one').after('<p>this is jquery</p>').next('p').insertAfter('#two');

jsFiddle Demo

Answer 4

$(document).ready(function() {
$('#one').after("<p>Let's see what we can add</p>");
$('p').after($('#two'));
});

This will work as it has complete flow of elements.