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（）？

回答

相关问题