Before and after with "img" and "p"...???

Before and after with "img" and "p"...???

Hello!
If I write text before and after "img" it appears in the same line, but if I use "p" instead, I get p text, befoe text and after text in 3 lines.

How can I achiev to have before text and after text in the same line as p text?

Many thanks!!!

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("#btn1").click(function(){
  9.     $("p").before("<b>Before</b>");
  10.   });

  12.   $("#btn2").click(function(){
  13.     $("p").after("<i>After</i>");
  14.   });
  15. });
  16. </script>
  17. </head>

  19. <body>
  20. <p> Element p</p>
  21. <br><br>
  22. <button id="btn1">Insert before</button>
  23. <button id="btn2">Insert after</button>
  24. </body>
  25. </html>