I'm pretty sure I can trick the Codecademy 4/14 question

$(document).ready(function() {
$('#one').after('<p> I\'m a Crazy Monkey! </p>');

I've posted the above code into 4/14 - Modifying HTML Elements and it has gone through.
Technically I'm sure this is wrong, so I want someone to explain to me why it is wrong (cause I'm pretty sure just changing the above class is just tricking the system..) and the reasons for the correct code being correct.. (Does that make sense?)...


well in 4/14 it asks you to put the <p> tag after div #two correct?

so after

  $('#one').after('<p> I\'m a Crazy Monkey! </p>');

Just add


You could aslo assign a variable (var $paragraph = $("p");) and add that in there to look like

//I had some problems with this so I just used the one without adding a variable


I am aware that the above code is the correct answer to the question.

I need help understanding what this function actually means and why it moves the element below.


Oh well you good sir, are in luck

let's convert the code to English so we can understand it better.


I'm not going to bore you as I am pretty sure you already understand that $("#two").after means "The thing in the parameter of after will be put after the div that I'm attached to"

I'm also sure that before you took the jQuery course you took the HTML and CSS courses so I'm going to use those to help describe this.

You remember in CSS how you'd change what was in the HTML tag like this:

p {


Well imagine you're trying to do the same thing with jQuery, so you have the '<p>' paragraph that has been set already, but you want to change it. So jQuery uses the $("p") to select the paragraph or <p> tag.


Thanks for your quick answer - Doesn't the idea of adding a variable when there is no need a total conflict of interest against the software development methodology called D.R.Y?


Is this just because this is a simulated code learning environment?


Simulated code learning environment, I can't think of a time you'd do something like this in the real world without adding a lot more in terms of if statements, and so on. If I think of something more specific I'll be sure to let you know.


You assume correct :wink: I appreciate that it's fairly silly to try and jump into adding functionality to a web page if I can't even create the web page in the first place..

Okay.. I understand. Finally, Does the script run in order when loaded up, or can this change depending on one's code? Also, if a page was to load, would the user notice any visual difference; Will thet see the #one id relocate from the top to the bottom?

Sorry for asking so many questions!!

Thanks for all your help!


Well let's take a look at this function:


the (document).ready means as soon as this is loaded it will make this kind of change. But not so for the rest of the time the website is loaded. It will take and make all the changes right as the page is being loaded up so there's nothing the user can do that will change where the paragraph or whatever is afterwards.

I'm not sure if this completely makes sense but if it doesn't message me and I'll explain it in greater detail.


Hit the nail on the head.
In order to make something happen within the view of the user, I would have to add additional functionality (.mouse-over or .pull-down etc...), not just making a back-end functional change to the code.

Thanks! :smiley: