DOM appendChild備選

Question

我正在創建DOM元素，如下所示;

var imgEle = document.createElement('img'); 
    imgEle.src = imgURL;         
    x.appendChild(imgEle); 

現在最後一行，而不是追加其創建多個IMG元素每個函數被調用時，我希望它被替換或永遠是x的第一個子元素..

應該如何我爲crossbrowser兼容性做同樣的事情嗎？

Answer 1

var xChildren = x.childNodes; 
if(xChildren[0]) 
    x.replaceChild(myIMG, xChildren[0]); 
else 
    x.appendChild(myIMG); 

應該做的伎倆

我們抓住X的所有子元素，然後我們檢查，看看他們的第一個定義。 （如果有多個，您也可以使用x.innerHTML方法一次全部刪除它們）。如果定義了它，我們用新創建的元素替換它，如果它不是 - 我們簡單地追加元素。

編輯：通過在一個循環中創建和追加元素，你使你的腳本有點沉重 - 因爲它似乎只想改變x中包含的圖像，爲什麼不簡單地使用chaning .src屬性？

var xChildren = x.childNodes; 
var myIMG;  
if(xChildren[0]) 
    mIMG = xChildren[0]; //you should be sure that this is an image 
    // perhaps you might want to check its type. 
else{ 
    mIMG = document.createElement("img"); 
    mIMG.src = "source"; 
    x.appendChild(mIMG); 
} 

//now the loop 
while(your_condition) 
    mIMG.src = "source of the image"; 

這樣，您只能使用和編輯一個元素。