原生js動態(tài)生成html初始化插入到body（不指定id/class）

我想在工具類util.js中添加一個(gè)方法，在html引入該js時(shí)，自動在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;//得到頁面的第一個(gè)元素 
        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;
    }

存在如下問題：

調(diào)用時(shí)候 log（window.docuemt,"werwer"）在頁面初始化js中obj.body.firstChild 一直報(bào)錯(cuò)找不到firstChild。
網(wǎng)上大多數(shù)插入都是插入到對應(yīng)class下或者插入到某個(gè)id元素節(jié)點(diǎn)下，我想直接插入到body下面。
我引入的js 直接document 和在html初始化代碼中document 是一個(gè)對象嘛。

回答

編輯回答

負(fù)我心

調(diào)用這段腳本在你文檔的什么位置？如果是在比較靠前的位置甚至是 head 里，那時(shí)候 body 還沒加載完。應(yīng)該等 body 加載完再去調(diào)用。
沒看懂想問什么，你代碼里 body.insertBefore() 已經(jīng)是直接插入 body 了。如果是想要加載 body 最后面就用 body.appendChild(div)。
沒看懂說的什么

2017年3月30日 09:34

編輯回答

莓森

1.確保在執(zhí)行l(wèi)og時(shí)，firstChild已經(jīng)在頁面生成，可以把js文件放到</body>后面引用，也可以寫一個(gè)window.onload事件

obj.body.appendChild(node)

3.document和window.document是同一個(gè)對象

2017年8月10日 22:05

編輯回答

呆萌傻

各種看不明白。這個(gè)函數(shù)本來看起來似乎沒什么問題，沒有完整的調(diào)用不好判斷問題在哪里。

你的想法沒什么問題，邏輯是對的，多半是代碼沒寫好。

2018年5月1日 11:42

編輯回答

初心

建議是這樣的

//我覺得你應(yīng)該希望onload之前的也log出來所以內(nèi)容和load狀態(tài)沒關(guān)系。load之后添加log到body的下面，盡量保證你的思路
//創(chuàng)建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內(nèi)容添加
2.如果有沒有body不做操作
3.如果是空的body直接插入
4.如果是已經(jīng)插入不做操作
5.如果有內(nèi)容且內(nèi)容第一個(gè)不是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);
        }
    }
}

2017年10月29日 20:31