Native js dynamic generation html initialization is inserted into body (id/class is not specified)

I want to add a method to the utility class util.js. When html introduces the js, the generated html is automatically inserted into the html as follows: 

    function log(obj,text) {
        var logId = "testlog";
        var div = obj.createElement("div");
        div.id = logId;
        var logObj = obj.getElementById(logId);
        var first=obj.body.firstChild;// 
        obj.body.insertBefore(div,first);
        logObj.style.display = "block";
        logObj.style.color = "white";
        logObj.style.size = "32px";
        logObj.backgroundImage = "url(/popCashierbg.png)";
        logObj.innerHTML = text;
    }

has the following problems:

    When
  1. is called, log (window.docuemt, "werwer") has been unable to find firstChild when obj.body.firstChild reported an error in the page initialization js.
    2. Most inserts on the
  2. network are inserted under the corresponding class or under an id element node, which I want to insert directly under the body.
  3. the js direct document I introduced is the same object as document in the html initialization code.
Javascript
Feb.28,2021

the suggestion is as follows 

//onloadlogloadloadlogbody
//dom
var logDom = document.createElement("div");
logDom.style.display = "block";
logDom.style.color = "white";
logDom.style.size = "32px";
logDom.backgroundImage = "url(/popCashierbg.png)";
/*
1.log
2.body
3.body
4.
5.logDom
*/
function log(obj, text) {
    logDom.innerHTML += text + '<br/>';
    if (obj.body) {
        var first = obj.body.firstChild
        if (first) {
            if (first!== logDom) {
                obj.body.insertBefore(logDom, first);
            }
        } else {
            obj.body.appendChild(logDom);
        }
    }
}

1. Make sure that when you execute log, the firstChild has been generated on the page, you can put the js file after the reference < / body >, or you can write a window.onload event

2. 

obj.body.appendChild(node)

3.document and window.document are the same object

  1. where is the call to this script in your document? If it is in a higher position or even in the head, the body is not finished loading at that time. You should wait until the body is loaded before calling it.
  2. doesn't understand what you want to ask. body.insertBefore () has been directly inserted into body in your code. If you want to load body, use body.appendChild (div) at the end.
  3. I don't understand what I'm saying

I don't understand all kinds of things. This function doesn't seem to have a problem, and it's hard to tell what the problem is without a complete call.

there's nothing wrong with your idea, the logic is right, and most of it is that the code is not well written.

Previous: The problem of vue axios carrying cookie is very serious!

Next: Why is it so difficult for vscode to write vue if you want to use a vetur?

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-1b36d27-2b898.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-1b36d27-2b898.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?