最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - .prepend is not a function - Stack Overflow

programmeradmin3浏览0评论

Please consider the following sample code:

<!DOCTYPE html>
<html>
    <head>
        <script src=".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

Please consider the following sample code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis./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

Share Improve this question edited Jun 22, 2017 at 3:52 Venkat asked Mar 17, 2016 at 11:20 VenkatVenkat 2,5893 gold badges31 silver badges64 bronze badges 3
  • 2 Please provide a link to the W3schools sample you're referencing. Google brings up nothing like that from that site. – user1106925 Commented Mar 17, 2016 at 11:29
  • Let us know if you got the solution you are looking for. – Praveen Kumar Purushothaman Commented Mar 17, 2016 at 11:31
  • @squint Sorry for the inconvenience. This is not a direct code taken from the site,So i have edited my question. – Venkat Commented Mar 17, 2016 at 11:34
Add a ment  | 

2 Answers 2

Reset to default 5

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./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.

The error appears because createElement() returns a DOMElement which does not have an append() method; that's only available on jQuery objects. You need to either wrap the DOMElement to a jQuery object or, better yet, create the element in jQuery:

$("#btn1").click(function(){
     var btn = $('<button />');     
     btn.prepend("<b>Prepended text</b>. ");
     // add the btn to the DOM somewhere...
});
发布评论

评论列表(0)

  1. 暂无评论