Moving Elements Around 4\14


#1

what's wrong with this code ??!!
it says :"it looks like you added more than one <p>!

$(document).ready(function() {
	$('#one').after('<p>I done it!</p>');
	var $div = $('p');
	$('#two').after($("p"));
});

#3

On your code you have:

 $(document).ready(function() {
	$('#one').after('<p>I done it!</p>');
	var $div = $('p');
	$('#two').after($("p"));
});

On line 4 call this instead

        $('#two').after($paragraph);

#4

@cameronism But that won't work, because you haven't defined a $paragraph variable.


#5

You have two ways of doing it.

Remember:
1)

var $paragraph = $('p');
$('div').after($paragraph);

------OR-----------

2)

$('div').after($('p'));

You selected option 1) so in that case in line 4 with your current code you would had to call:

$('#two').after($div);

Since the var you defined with $('p'); name is $div, makes it a bit confusing right ? Thats why is better if your var name you change it to $paragraph, it makes code easier to read for you and for anyone so i would do:

var $paragraph = $('p')
$('#two').after($paragraph)

Thats it for Option 1)

For Option 2) you would follow the following structure:

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

They both do the same thing ! The problem is that you mixed both lets say syntaxes and thats why its not working, method 1) has its syntax and process and 2) has its own, both do the same thing just make sure to follow the correct procedure when selecting wich one you will use in your code! Hope this helped !

Happy Coding!


#9

I have a question based on step two:

  1. create a new jQuery selector that targets the < div> with the id #two .

Does this not mean that for some strange reason we basically have to write a line of code that looks like this:

var $two = $('#two');

? Because I understand the way you did it, but why does it say we need a selector targeting this div? When I try to do this I end up with something stupidly like this:

$(document).ready(function() {
$('#one').after("< p >a portable paragraph< /p >");

var $two = $("#two");
$('$two').after($('p'));

});

and am just confused.


#11

step two is just saying use $("#two"), you don't have to create a new variable

You are just telling JQ that you want to place the $("p") after the $("#two") selector.

This is what worked for me:

line1:    $(document).ready(function(){      
line2:    $("#one").after("<p>I am a robot</p>"); 
line3:    $("#two").after($("p"));                         
line4:    });

1: when page ready run this function
2: create a new <p> after the #one div
3: place the newly created <p> after the #two div
4: close code block

Hope that helps I was a little hung up on this one too.


#12

Thanks a lot for hints. Now i figured out that there is a 'p' tag in html after line2 executing :slight_smile:


#13