jQuery: Create new elements

Note that the paragraphs appear in reverse order. The generated <p> elements are numbered 1 to 4 in the document head functions. But each is inserted AFTER <p id="first">, thus they appear to be reversed

A new element is coming up...(this text is hardcoded)

The jQuery codeCode START

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">
      $(function() {
        $("<p>1. And here's another one! (this text added with jQuery insertAfter)</p>").insertAfter("#first");

        $("<p>2. And me too! (this text added with jQuery insertAfter)</p>").insertAfter("#first");

        $("<p>3. Me too! (this text added with jQuery insertAfter)</p>").insertAfter("#first");

        $("<p>4. I'm a new <p> element! (this text added with jQuery insertAfter)</p>").insertAfter("#first");
      });
    </script>
    
  </head>
  
  <body>
    <h1>Creating new elements</h1>
    <p id="first">A new element is coming up...(this text is hardcoded)</p>