jQuery prependTo function not working as expected

jQuery prependTo function not working as expected

Hello Everyone: 

I am doing an exercise using prependTo function. instead of appending before the paragraph in the HTML body. The text appeared on a separate line. 

Could you explain to me how appendTo and prependTo works, so I understood its behavior. Thanks!

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  5. <html>

  7. <head>
  8.   <title>hello world</title>
  9.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10.   <link rel="stylesheet" href="stylesheet1.css" type="text/css" />
  11.   
  12.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
  13.  <script language="JavaScript" type="text/javascript">
  14.  
  15.   <!--
  16.   $(document).ready(function(){
  17.    var p1= $('<p>use preappend to add some text</p>').prependTo('#disclaimer');;
  18.   
  19.  //$('p1').prependTo('#disclaimer'); //doesn't work as expected append the text before paragraphy with id = disclaimer
  20.   });
  21.   //-->
  22.  </script>
  23. </head>

  25. <body>
  26.   <p id="disclaimer">this is a legal statement of our website</p>
  27. </body>
  28. </html>
    29.