Question

我创建了一个html文档，它使用javascript连接到xml并使用此CSS获取要加载的图片的名称：

#container {
 width:800px;
}
#left {
    top:10%;
    position: relative;
    float: left;
    width:200px;
    left:30px;
}
#right {
  position:absolute;
  top: 0px;
  right: 300px;
  z-index:-1;
}

这段代码：

var TestP = new Array();

function loadImg(n){

TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
alert(TestP[n]);
img.src = TestP[n];


alert(n);
alert(TestP[n]);
document.getElementById('right').appendChild(img);

HTML的一部分：

<li><a href="#" onClick="loadImg(1)">Part 1</a></li>

事情就是当我第一次点击链接时，一切都运行良好，但是当我再次单击时，我会得到两个图像，每个图像位于不同的位置。我希望第二张图像占据完全相同的位置，位于第一张图像之上。

Answer 1

不要创建新图像，而是替换src属性。

首先给图像一个id，所以你可以找到它：

<img id="myimage" src="..."/>

改变它是这样的：

document.getElementById("myimage").src = "...new source...";

另一种选择：

var TestP = new Array();

function loadImg(n) {
    TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
    var myImage = document.getElementById("myimage");
    if(myImage != null) {
        myImage.parentNode.removeChild(myImage);
    }
    var img = document.createElement('img');
    img.src = TestP[n];
    img.id = "myimage";
    document.getElementById('right').appendChild(img);
}

Answer 2

听起来你只想要一个图片，每次都要更改网址。

在HTML中定义：

<img id="image">

并在JavaScript中使用：

var TestP = []; // cleaner way for creating an array

function loadImg(n) {
  TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;

  document.getElementById('image').src = TestP[n];
}

另请注意，HTML5引入了一些语义，其中一个是通过JavaScript而不是通过HTML绑定事件处理程序。

Answer 3

elem = document.getElementById( 'right' );
child = elem.firstChild;
if ( child )
  elem.replaceChild( img, child );
else
  elem.appendChild( img );

Answer 4

好吧，你是用.appendChild（）来做的。然后你再次调用它并附加第二个孩子。所以，你有两个选择。在附加第二张图像之前，删除旧图像，或者，只需将其替换即可。

如何在同一个地方加载几个图像

4 个答案: