.prepend is not a function

Please consider the following sample code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#btn1").click(function(){
                    var btn = document.createElement("BUTTON");     
                    btn.prepend("<b>Prepended text</b>. ");
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <button id="btn1">Prepend text</button>
    </body>
</html>

The above code throws the error in console like:

btn.prepend is not a function

Why does this error occur? Please suggest a solution. Thank You

Solution

Please, kindly do not follow the low quality articles from W3Schools. For your solution:

The btn is not a jQuery object. It is a JavaScript HTMLElement.
The .prepend() function is a jQuery function.

Your code now should be:

$(document).ready(function(){
  $("#btn1").click(function(){
    var btn = $(this);
    btn.prepend("<b>Prepended text</b>. ");
  });
});

Working Snippet

$(document).ready(function(){
  $("#btn1").click(function(){
    var btn = $(this);
    btn.prepend("<b>Prepended text</b>. ");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button id="btn1">Prepend text</button>

See the working snippet above. Click on the Run Code Snippet and click the button inside.