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)

Front-end html5 javascript
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

.

Previous: Does vue implement data docking similar to alphabetically sorted address books?

Next: What tool does tomcat use to compile jsp into bytecode files (.class)

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9c86f-18e3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9c86f-18e3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?