如何

Question

我已經創建了一個使用JavaScript來連接到XML，並得到一個圖片的名稱HTML文檔使用該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的一部分：

的事情是，當我第一次點擊的鏈接，一切工作但是當我再次點擊時，我會得到兩張圖片，每張圖片都在不同的位置。我想讓第二張照片拍到完全一樣的地方，在第一張照片的頂部。

Answer 1

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

Answer 2

不會創建新圖像，而是替換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 3

好了，你用.appendChild（）來做。然後你再次調用它並附加第二個孩子。所以，你有兩個選擇。在添加第二張圖像之前，請先刪除舊圖像，或者將其替換。

Answer 4

聽起來像你只想一個圖像，其中你每次更改的URL。

定義您的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。