Javascript jQuery非常简单的代码似乎不起作用_Javascript_Jquery

Javascript jQuery非常简单的代码似乎不起作用

javascript jquery

Javascript jQuery非常简单的代码似乎不起作用,javascript,jquery,Javascript,Jquery,以下是我的jQuery代码： (function() { var overlay = { init: function() { $('<div></div>', { class: 'overlay' }) .insertAfter('button'); } }; overlay.init(); })(); （函数（）{ 变量覆盖={ init:function（）{ $('', { 类别：“

以下是我的jQuery代码：

(function() {


var overlay = {

    init: function() {

    $('<div></div>', {
        class: 'overlay'
    })
        .insertAfter('button');

    }

};

overlay.init();

})();

（函数（）{
变量覆盖={
init:function（）{
$('', {
类别：“覆盖”
})
.insertAfter（“按钮”）；
}
};
overlay.init（）；
})();

我希望这会在我的按钮下放置一个div，但是创建的HTML不包含div：

  <body>

    <button>Reveal More Info</button>

  </body>


透露更多信息

抱歉，如果这是一个新手问题，我刚刚开始学习

HTML标题：

<head>
    <title>jQuery rules</title>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="script.js"></script>
    <style>

    body {
      background: yellow;
    }

    button {
      margin: 100px 0 0 200px;
    }

    div {
      display: none;
      width: 600px;
      height: 400px;
      background-color: white;
      border-radius: 40px;
      position: absolute;
      left: 25%;
      top: 30%;
    }

    </style>

  </head>


jQuery规则
身体{
背景：黄色；
}
钮扣{
利润率：100px200px；
}
div{
显示：无；
宽度：600px；
高度：400px；
背景色：白色；
边界半径：40px；
位置：绝对位置；
左：25%；
最高：30%；
}

来自jQuery文档，例如，请参见：

大宗报价名称“class”必须在对象中引用，因为它是JavaScript保留字，“className”不能使用，因为它引用的是DOM属性，而不是属性

问题是在将按钮添加到dom之前执行的标头中包含script.js，因此insertAfter（）将无法找到插入div的

按钮
这里的解决方案是使用，或者在正文的底部插入脚本（就在
之前）
//dom就绪处理程序
jQuery（函数（$）{
变量覆盖={
init：函数（）{
$('', {
“类”：“覆盖”
}).insertAfter（“按钮”）；
}
};
overlay.init（）；
});

演示：
代码运行良好，您确定正确包含jQuery库吗？运行良好取决于您何时调用该闭包。它在文档中。准备好了吗？例如，如果您直接在
部分调用它，它应该不起作用。是的，我确实有样式，jQuery被正确地包含在其他代码中@DontVoteMeDown你什么意思？我是说：。我更新了@Mikey snippet，但我只将第二个下拉选项从onLoad
更改为in
，这意味着它将在呈现
之前添加并执行。因此，代码不起作用，因为它将尝试附加到不存在的中。是否清楚？谢谢，但问题尚未解决：/
//dom ready handler
jQuery(function ($) {
    var overlay = {
        init: function () {
            $('<div></div>', {
                'class': 'overlay'
            }).insertAfter('button');
        }
    };
    overlay.init();
});