Javascript:多次使用document.getElementById(id）.appendChild(）

Javascript: Multiple use of document.getElementById(id).appendChild()?

本文关键字：getElementById appendChild id document Javascript      更新时间：2023-09-26

在以下代码中使用document.getElementById(id).appendChild(img)会给浏览器带来问题吗？我想知道，在文档的生命周期中，我是否多次使用appendChild((更新图像可能会导致内存问题，或者只创建一个节点？我知道下面的代码只加载一次图像，但我计划扩展代码，将图像随机更改为动画。该文件将显示对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>

如果你是作为动画来做的，你最好只更改图像标签的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不是您调用该函数的唯一时间。如果是的话，那么你的问题就没有意义了，因为你问的是经常打电话的影响。按照我所展示的方式，您首先从文档中获取代码(这是一件好事(，并使其成为任何调用代码都可以替换由该图像标记来源的图像文件。

如果使用removeChild从#imagediv中移除图像，则不会。当您从文档中删除图像时，垃圾回收会迅速释放内存。因此，只要您没有将隐藏在DOM中的图像保留在某个位置，就没有什么可担心的。

一个更好的想法是更改现有img标记的来源，这将在不创建或销毁新元素的情况下替换图像。

如果你只做一次，那就可以

如果多次这样做，它将添加许多图像

相关文章：