原生js动态生成html初始化插入到body（不指定id/class）

Question

我想在工具类util.js中添加一个方法，在html引入该js时，自动在html中插入一段生成的html 如下：

    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;
    }

存在如下问题：

1. 调用时候 log（window.docuemt,"werwer"）在页面初始化js中obj.body.firstChild 一直报错找不到firstChild。
2. 网上大多数插入都是插入到对应class下或者 插入到某个id元素节点下，我想直接插入到body下面。
3. 我引入的js 直接document 和 在html初始化代码中document 是一个对象嘛。

Answer 1

建议是这样的

//我觉得你应该希望onload之前的也log出来所以内容和load状态没关系。load之后添加log到body的下面，尽量保证你的思路
//创建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);
        }
    }
}

Answer 2

1.确保在执行log时，firstChild已经在页面生成，可以把js文件放到</body>后面引用，也可以写一个window.onload事件

2.

obj.body.appendChild(node)

3.document和window.document是同一个对象

Answer 3

1. 调用这段脚本在你文档的什么位置？如果是在比较靠前的位置甚至是 head 里，那时候 body 还没加载完。应该等 body 加载完再去调用。
2. 没看懂想问什么，你代码里 body.insertBefore() 已经是直接插入 body 了。如果是想要加载 body 最后面就用 body.appendChild(div)。
3. 没看懂说的什么

Answer 4

各种看不明白。这个函数本来看起来似乎没什么问题，没有完整的调用不好判断问题在哪里。

你的想法没什么问题，逻辑是对的，多半是代码没写好。