使用JavaScript將新元素添加到DOM中（appendChild）

我有時需要向現有的HTML頁面添加元素（例如新的鏈接和圖像），但我只能訪問遠離我的頁面的一小部分需要插入元素。我想使用基於DOM的JavaScript技術，並且我必須避免使用document.write（）。使用JavaScript將新元素添加到DOM中（appendChild）

到目前爲止，我一直在使用這樣的事情：

// Create new image element 
var newImg = document.createElement("img"); 
    newImg.src = "images/button.jpg"; 
    newImg.height = "50"; 
    newImg.width = "150"; 
    newImg.alt = "Click Me"; 
// Create new link element 
var newLink = document.createElement("a"); 
    newLink.href = "/dir/signup.html"; 
// Append new image into new link 
newLink.appendChild(newImg); 
// Append new link (with image) into its destination on the page 
document.getElementById("newLinkDestination").appendChild(newLink);

有，我可以用它來完成同樣的事情更有效的方法？這一切似乎都是必要的，但我想知道是否有更好的方法可以做到這一點。

來源

2010-06-02 KatieK

有一種更有效的方法，並且如果可能的話，似乎正在使用documentFragments。查看：http://ejohn.org/blog/dom-documentfragments/。同樣，這種方式應該比起開始混合巨大的字符串文字並將它們設置爲其他DOM對象的innerHTML更容易出錯並且更易於維護。

來源

2010-06-03 03:33:44 Matias

謝謝！我會檢查一下我的下一個項目。 – KatieK 2010-06-03 16:50:13

+1因爲John Resig。 – 2012-09-10 01:16:07

沒有錯。使用innerHTML的速度會稍微快一些，可能會少些字符，但對於這種規模的東西來說並不明顯，而且我個人偏好的是更標準，統一支持和更安全的DOM方法和屬性。

一個小點：<img>元素的height和width屬性應該是數字而不是字符串。

來源

2010-06-02 22:48:16

感謝有關高度和寬度的提示。這很有道理。 – KatieK 2010-06-03 16:50:55

如果你不添加很多東西，你一直在做的方式是理想vs innerHTML。如果你經常這樣做，你可能只需創建一個通用函數/對象，將相關信息作爲參數並執行骯髒的工作。 IE

function addImage(src,width,height,alt,appendElem,href) {...}

我經常在我自己的項目中使用原型來節省時間。

來源

2010-06-02 23:07:33 edl

只要當心，那innerHTML是非標準的和臭名昭着的buggy。

來源

2010-06-03 01:53:23 dplass

哇，我不知道'innerHTML'是越野車！感謝您的提醒。 – 2012-09-10 01:15:15

+1 IE9不支持用於選擇的innerHTML – 2012-11-22 18:40:16

使用JavaScript將新元素添加到DOM中（appendChild）

回答

相關問題