2011-05-16 62 views
33

我想使用的insertBefore在JS是這樣的:如何在body標籤中插入()元素?

var p = document.createElement("p"); 
p.innerHTML = "test1"; 
document.body.insertBefore(p, null); 

var p = document.createElement("p"); 
p.innerHTML = "test2"; 
document.body.insertBefore(p, null); 

但是,這也只是body標籤結束前添加的最後一個p元素,我如何使用它,所以它會被添加到頂部什麼時候打開?所以添加的最後一個元素將是body標籤中的第一個元素。

我想:

document.body.insertBefore(p, document.getElementsByTagName('body')[0]); 

但螢火蟲顯示:

節點沒有找到 「代碼:」 8

+0

試用document.body.prepend。此外,不設置innerHTML通常是良好的做法。使用'oldNode.replaceWith(newNode)'或設置'oldNode.innerText' – Gibolt 2017-08-07 23:49:39

回答

57

你可以得到body元素的第一個孩子與firstChild屬性。然後用它作爲參考。

document.body.insertBefore(p, document.body.firstChild); 

jsFiddle

1

你必須在某事之前插入。 document.getElementsByTagName('body')[0] body元素(語法是有點一招讓body元素在所有瀏覽器)。如果要插入正文中,則需要在第一個元素之前插入。這可能是這樣的:

var body = document.body || document.getElementsByTagName('body')[0], 
    newpar = document.createElement('p'); 
newpar.innerHTML = 'Man, someone just created me!'; 
body.insertBefore(newpar,body.childNodes[0]); 

在一些瀏覽器是document.body ,其他 document.documentElement等,但在所有瀏覽器的標記名是 body

+0

哪些瀏覽器不支持'document.body'? – alex 2011-08-29 07:06:40

+0

@alex你是對的,每個瀏覽器似乎都支持它。我認爲這是一段很久以前的記憶。 – KooiInc 2011-08-29 09:36:49

+0

@Kooilnc感謝您回到我身邊,我在野外有很多'document.body',有點擔心:P – alex 2011-08-29 09:52:21

3
document.body.prepend(p); 

這是一個新的(可能)增加ES7。這是香草JS,比以前的選項更具可讀性。目前有83% of browsers,包括Chrome,FF和Opera。

您可以直接在前面加上字符串,雖然他們不會 'P' 標籤

document.body.prepend('This text!'); 

鏈接:developer.mozilla.org - Polyfill