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
  3. network are inserted under the corresponding class or under an id element node, which I want to insert directly under the body.
  4. the js direct document I introduced is the same object as document in the html initialization code.
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.

Menu