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

Question

在以下代碼中使用document.getElementById(id).appendChild(img)會導致瀏覽器出現問題嗎？ 我想知道我是否使用appendChild（）在文檔的生命周期中多次更新圖像可能會產生內存問題或者只創建一個節點？ 我知道以下代碼只加載圖像一次，但我計划擴展代碼以隨機將圖像更改為動畫。 該文檔將在document.getElementById(id).appendChild(img)的生命周期中多次看到對document.getElementById(id).appendChild(img)的調用。

<!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>

Answer 1

如果您將其作為動畫進行操作，那么最好只更改圖像標記的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不是您調用該函數的唯一時間。 如果是的話，那么你的問題是沒有問題的，你問的是調用它的影響很大。 按照我正在展示的方式進行操作，您首先要從文檔中獲取代碼（這是一件好事），並使其成為任何調用代碼都可以替換由該一個圖像標記源代碼的圖像文件。

Answer 2

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

更好的想法是更改現有img標記的來源，這將替換圖像而不創建或銷毀新元素。

Answer 3

如果你這樣做只有一次沒關系

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

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

問題描述

3 個解決方案

解決方案1
1 已采納 2013-02-27 03:41:31

解決方案2
1 2013-02-27 03:42:34

解決方案3
0 2013-02-27 03:42:57

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

問題描述

3 個解決方案

解決方案1 1 已采納 2013-02-27 03:41:31

解決方案2 1 2013-02-27 03:42:34

解決方案3 0 2013-02-27 03:42:57

解決方案1
1 已采納 2013-02-27 03:41:31

解決方案2
1 2013-02-27 03:42:34

解決方案3
0 2013-02-27 03:42:57