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不是函数

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

Answer 1

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

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

您的代码现在应该是：

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

工作代码段

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅上面的工作代码段。单击运行代码片段，然后单击里面的按钮。

Answer 2

出现错误是因为createElement()返回没有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不是一个函数

2 个答案: