What is the problem with an instance of new?

html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="./showbox.css">
</head>
<body>
    <script src="./jQuery-1.12.4.js"></script>
    <script src="./showbox.js"></script>
    <script>
        $(function(){
            var box = new ShowBox();
            box.push("hello world");
        });
    </script>
</body>
</html>

js:

(function(){

    function ShowBox(){};

    ShowBox.prototype = {
        push:function(content){
           var layer = "<div class="showbox_layer"></div>";
           if(content){
              $("html,body").html(layer);
           } 
        }
    }

    window.ShowBox = ShowBox;

}());
The jquery in the

page is introduced normally.
question: after running the page, F12 calls up the console. The head section has no content, and the page style does not take effect. (style has been determined to be introduced)

Mar.19,2021

Why use $('html,body') ?
$(' html,body') selects two elements, namely, html element and body element. The .html method completely overrides the content of the element with the parameter .html .

that is, first of all, the content of html element is completely replaced by < div class= "showbox_layer" > < / div > , which may be when adding elements to html . Because div is not a valid element of html , an empty head tag, an empty body tag is generated, and then the < div class= "showbox_layer" > tag is generated.

then the content of the body element is completely replaced by < div class= "showbox_layer" > < / div > , because there is only < div class= "showbox_layer" > < / div > before the body , so the content displayed after the replacement is the same as that before the replacement.

this leads to the effect in the screenshot. Don't you notice that not only is head empty, but also the script tag of body is gone.

so first change $('html,body') to $(' body') , and then replace the .html method with .prepend or .append method:

$('body').prepend(layer);

whether to replace the .html method with the .prepend method depends on your requirements. If your requirement is a complete replacement, then use the .html method. If it is added, it is better to replace it with .prepend or .append .


from the picture below you, it shows that layer has been inserted into body, and layer has no content in your code, so the page is blank

.
Menu