.prepend 不是函数

Question

请考虑以下示例代码：

<!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>

以上代码在控制台中抛出如下错误：

btn.prepend is not a function

为什么会出现这个错误？请提出解决方案。谢谢

Answer 1

请不要关注W3Schools 的低质量文章。对于您的解决方案：

btn 不是 jQuery 对象。这是一个 JavaScript HTMLElement.
.prepend() 函数是一个 jQuery 函数。

您的代码现在应该是：

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

工作代码段

$(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>

请参阅上面的工作代码段。单击 运行代码段 并单击里面的按钮。

Answer 2

错误出现是因为 createElement() returns 一个没有 append() 方法的 DOMElement；仅适用于 jQuery 个对象。您需要将 DOMElement 包装到 jQuery 对象，或者更好的是，在 jQuery:

中创建元素

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

.prepend 不是函数

.prepend is not a function

html

javascript

jquery

function

prepend