Javascript：多次使用document.getElementById（id）.appendChild（）？

在以下代碼中使用document.getElementById(id).appendChild(img)會導致瀏覽器出現問題嗎？我想知道如果我在文檔的生命週期中多次使用appendChild（）更新圖像可能會產生內存問題，或者只會創建一個節點？我知道下面的代碼只加載一次圖像，但我打算擴展代碼以隨機更改圖像作爲動畫。該文件將在文件的整個生命週期中多次看到 document.getElementById(id).appendChild(img)的呼叫。Javascript：多次使用document.getElementById（id）.appendChild（）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Untitled Document</title> 
    <script type="text/javascript"> 

    var img = document.createElement("IMG");  
    images = new Array(); 

    function random_image(id) 
    { 
     var i = 0;    

      for(i = 0; i < 7; i++) 
      {    
       images[i] = "image" + i + ".jpg" 
      }  

     var random = (Math.floor(Math.random()*7)); 
     img.src = images[random]; 
     document.getElementById(id).appendChild(img); 
    } 
    </script> 
    </head> 
    <body onload = "random_image('image')"> 
    <div id="image"></div> 
    </body> 
    </html>

來源

2013-02-27 pandoragami

你知道，每次追加的東西時會添加其他元素，而不是取代現有的？ – kinakuta 2013-02-27 03:42:01

是的，這就是我問這個問題的原因，因爲我不太確定如果我在同一個文檔中多次使用appendchild（）會發生什麼。 – pandoragami 2013-02-27 04:03:29

如果你是做動畫的話，最好是改變圖片標籤的src和適當的圖片url，而不是更換圖片標籤本身。

*編輯迴應第一個註釋*

你已經擁有你所需要的代碼，但你做的是像每次重新附加到文件的內容。我建議的只是改變你已經得到的圖像的src。

var img = document.createElement("IMG");  
images = new Array(); 
var i = 0;    
for(i = 0; i < 7; i++){    
    images[i] = "image" + i + ".jpg" 
} 

function onLoad(){ 
    random_image('image'); 
    document.getElementById(id).appendChild(img); 
} 

function random_image(id){ 
    var random = (Math.floor(Math.random()*7)); 
    img.src = images[random]; 
} 
window.onload = onLoad;

請注意，我有點假設文檔加載evnet不是唯一一次你調用該函數。如果是這樣，那麼你的問題就是你正在問的關於調用它的影響的問題。按照我所展示的方式進行操作，首先將代碼從文檔中取出（一件好事），並使其可以使任何調用代碼都可以替換由該圖像標籤生成的圖像文件。

來源

2013-02-27 03:41:31 Paul

我不確定你的意思，你可以用代碼說... – pandoragami 2013-02-27 03:42:51

如果您使用removeChild從#image div中移除圖像，則不行。從文檔中刪除圖像時，垃圾回收將快速釋放內存。所以，沒有什麼可擔心的，只要你不保留隱藏在DOM中的圖像。

一個更好的主意是改變現有img標籤的來源，它將替換圖像而不創建或銷燬新元素。

來源

2013-02-27 03:42:34 MattDiamant

「一個更好的主意是改變現有img標籤的來源」我將如何編碼，請你舉個例子。謝謝 – pandoragami 2013-02-27 03:49:15

當然。檢查這裏的代碼：http://jsfiddle.net/eaNTY/。當你點擊圖片時，它會用getDocumentById獲取圖片，然後用.src =「下一張圖片的url」更改圖片的src。您可以根據需要多次執行此操作。 – MattDiamant 2013-02-27 03:56:00

如果你這樣做只有一次它的確定

如果做多次，它會添加許多圖像

來源

2013-02-27 03:42:57 Shehabix

不，它不會;他目前的代碼不會創建新的圖像元素，只是重新添加他已創建的圖像元素。它會將它移動到每次他創建節點時結束的節點。如果在隨後的調用中將輸入字符串更改爲該函數，則可能會將相同的圖像標記移動到其他位置。 – Paul 2013-02-27 03:58:11

Javascript：多次使用document.getElementById（id）.appendChild（）？

回答

相關問題