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
2 Answers
Reset to default 5Please, kindly do not follow the low quality articles from W3Schools. For your solution:
- The
btnis not a jQuery object. It is a JavaScriptHTMLElement. - 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...
});