4.4 Solved


#1

This one was really confusing but here is the code that will pass it

$(document).ready(function () {
$("#one").after("<p>New paragraph</p>");
$("#two").after($("p"));
});

The was I'm understanding it is we created the p tag in exercise 4.3 - in 4.4 we are taking that p tag and moving it after div #two with the $("p")

The confusing part was the instructions but just think of it as grabbing the p tag and putting it after the div with the id two. except we made the p tag in the .js file not .html


#2

@noeg,

I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of


<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
      <div class="container">
          <h2>Greetings</h2>
          <div id="one">Div #1</div>
          <div id="two">Div #2</div>
       </div>   
     </body>
  </html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------------+
       |                  |
     head                body
       |                  |
     title               div .container
                          |
                      +---+----+---------+
                      |        |         |
                     h2       div       div
                                #one      #two

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )

http://api.jquery.com/after/
With the jQuery after() Method
you have a facility with which you either

  • Create Content "< p>New paragraph< /p>"and then inserted after an HTML-element $("#one") within in the DOM
    $("#one").after("< p>New paragraph< /p>");

( the interpretation of the DOM )

            html
             |
       +-----+------------+
       |                  |
     head                body
       |                  |
     title               div .container
                          |
                      +---+----+---------+
                      |        |         |
                     h2       div       div
                               | #one      #two
                               p
  • An element in the DOM can also be selected $("p") and inserted after another element $("#two")
    $("#two").after($("p"));

( the interpretation of the DOM )

            html
             |
       +-----+------------+
       |                  |
     head                body
       |                  |
     title               div .container
                          |
                      +---+----+---------+
                      |        |         |
                     h2       div       div
                                #one     | #two
                                         p

#3

I found this type of explanation to be remarkably helpful, thank you very much for taking the time to teach us what we are actually doing in relationship to affecting the code.