jQuery: Moving elements with append()

Works with one click...but after the paragraph is moved, see what happens if you click the button again. Quite interesting...

The first shall be last.

The last shall be first.

The jQuery Code START

    
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
      function addContent() {
         $("p:last").append($("p:first"));
      }
    </script>
    
    <style type="text/css">
        .code { color: red; }
        .back { background-color: yellow; }
    </style>
  </head>

  <body>
    <h1>jQuery: Moving elements with append</h1>
    <p>The first shall be last.</p>
    <p>The last shall be first.</p>
    
    <form action="">
    <input type = "button" value="Move" onclick="addContent()"></input>
    </form>