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

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

javascript

Javascript：多次使用document.getElementById（id）.appendChild（）？,javascript,document,appendchild,Javascript,Document,Appendchild,在以下代码中使用document.getElementById（id）.appendChild（img）是否会导致浏览器出现问题？我想知道在文档的生命周期内是否使用appendChild（）多次更新图像可能会造成内存问题，或者只会创建一个节点？我知道下面的代码只加载一次图像，但我正计划扩展代码，将图像随机更改为动画。这份文件将表明需要采取行动 document.getElementById（id）.appendChild（img）在文档生命周期内多次出现 <!DOCTYPE html P

在以下代码中使用

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>


无标题文件
var img=document.createElement（“img”）；
images=新数组（）；
函数随机图像（id）
{
var i=0；
对于（i=0；i<7；i++）
{               
图像[i]=“图像”+i+“.jpg”
}       
var random=（Math.floor（Math.random（）*7））；
img.src=图像[随机]；
document.getElementById（id）.appendChild（img）；
}

如果你把它作为一个动画来做，你最好只改变图像标签的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;

var img=document.createElement（“img”）；
images=新数组（）；
var i=0；
对于（i=0；i<7；i++）{
图像[i]=“图像”+i+“.jpg”
}  
函数onLoad（）{
随机图像（“图像”）；
document.getElementById（id）.appendChild（img）；
}
函数随机图像（id）{
var random=（Math.floor（Math.random（）*7））；
img.src=图像[随机]；
}
window.onload=onload；

请注意，我在某种程度上假设，调用该函数的不仅仅是文档加载evnet。如果是的话，那么你的问题就是毫无意义的b/c你问的是关于频繁称呼它的影响。按照我所展示的方式，首先从文档中取出代码（这是一件好事），并使任何调用代码都可以替换由该图像标记生成的图像文件。

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

更好的办法是更改现有img标记的来源，这样可以在不创建或破坏新元素的情况下替换图像。

如果只执行一次，则可以

如果多次添加，会添加许多图像

您知道，每次添加内容都会添加另一个元素，而不是替换现有元素吗？是的，这就是我问这个问题的原因，因为我不太确定如果在同一文档中多次使用appendchild（）会发生什么。“一个更好的办法是更改现有img标记的源代码”我该如何编写，你能给出一个示例吗？谢谢。请检查这里的代码：。当你单击图像时，它会使用getDocumentById获取图像，然后使用.src=“下一个图像的url”更改图像的src“。你可以想做多少次就做多少次。不，不会的；他当前的代码没有创建新的图像元素，只是重新添加了他已经创建的图像元素。每次他这样做时，它都会将它移动到他正在创建的节点的末尾。如果他在后续调用中更改函数的输入字符串，则可能会将相同的图像标记移动到不同的位置。