4/14 Please help I can't figure what's wrong


#1

Helpp guys I can't figure what's wrong

$(document).ready(function() {
    $('#one').after('p');
});
$(document).ready(function() {
    $('#two').after('p');
});

#2

@bitwhiz08527,
During the load into your Browser of your HTML-Document
you will go through several =stages=
at every =stage= a particular event-flag is set
For instance,
if the HTML-Document has been in the load stage,
then all so-called DOM-Elements are loaded and all these DOM-Elements are modifyable
and the ready-flag is set.
If you then use

$(document).ready( function () {
  //all actions which should be done as the READY-flag has been set

});

You might try using

$(document).ready(function(){
   $('div #one').after('<p>Any text you like</p>');
// $('div #one').after($("p"));
   $('div #two').after($("p"));
});

=====================================

++ jQuery after() explained
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>
     </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            +---+----+---------+
                      |        |         |
                     h3       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            +---+----+---------+
                      |        |         |
                     h3       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            +---+----+---------+
                      |        |         |
                     h3       div       div
                                #one     | #two
                                         p

#3

You don't have to write div before the id name, or am I wrong?


#4

@codewhiz09204
Your assumption is right...
with #one you are selecting exactly that HTML Element which carries the id-Attribute "one"
and the convention is that an id-Attribute should be unique in the HTML-Document.....


#5

thank you very much for the help, now I can understand. :slight_smile:


#6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.