如何更改div的內容

我知道這個問題之前已經被問過，但是如果有人能夠更詳細地解釋它會很棒。我有一個div和一個表格和這個div內的圖像。我正在製作一個圖片庫，所以我有兩個鏈接向前和向後，我如何讓這些鏈接更改圖片，或者更確切地說，div中的所有內容。我對JavaScript非常陌生，實際上我對此一無所知，如果我能得到一步一步的指令，那將是非常棒的，我已經嘗試了其他的郵政編碼，但無法使其工作，所以我有不知道我做錯了什麼。如何更改div的內容

來源

2011-04-22 Aaron White

樣本HTML：

<html> 
<head><title>Dummy page</title></head> 
<body> 
    <div id="divID"> 
    <img id="backImg" src="http://test.com/sample.jpg"> 
    </div> 
</body> 
</html>

改變整個DIV：

var div = document.getElementByID('divID'); 
div.innerHTML = "<b>This is some html</b>";

只需更改圖像：

var img = document.getElementByID('backImg'); 
img.src = "http://www.host.com/image.jpg';

來源

2011-04-22 00:13:13

好，所以我不確定我是否理解，或者如果我清楚我的要求，我需要更改整個div，因爲我的圖像尺寸不一樣，樣式也不同，所以每個div都是不同的爲什麼我需要更改整個div。我不想使用按鈕來觸發更改而不是鏈接。並且同一個鏈接需要能夠將div更改爲另一個div，就像50個不同的div一樣......可以這樣做...... – 2011-04-28 01:59:22

下面是我做，可能會幫助一個很好的例子。嘗試一下 - http://jsfiddle.net/SuperBoi45/XMSGe/

這裏有一個快速瀏覽一下代碼：

HTML：

<button id="before">Previous</button> 
<button id="next">Next</button> 
<div id="imageGallery"></div>

的JavaScript：

function $(id) { 
    return document.getElementById(id); 
} 
var foward = null, 
    back = null, 
    images = [ 
     "http://www.toxel.com/wp-content/uploads/2009/04/conceptcar04.jpg", 
     "http://politicolnews.com/wp-content/uploads/2010/01/bill-gates-car.jpg", 
     "http://www.youthedesigner.com/wp-content/uploads/2008/05/car-wallpapers19.jpg", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-555c9ae9cfd364db5307b2e8d717a00d", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-01589fb639efec5433a3e30a8a8dd449", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-31f8cbd6627edc1ba9ef2828f3423fdf", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-0f47a0c2db85b5d7c134d41bcdc65b2e", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-739fd589778207e542a6e31873a24433", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-6056a5df58462ea4951a2b328243b7a2", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-59028363fc0f7d0ee7aa1ebc5e72713a", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-eb09864be7a1fbe7e821bc1ee08c3a8b", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-50bd88090e05a452bba67d510ba4a0cc", 
     "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-191b37eea296e90a242d24db90824c5c" 
     ]; 

var img = new Image(); 
for (var i = 0; i < images.length; i++) { // caching the images for performance boost 
    img.src = images[i]; 
} 

var image = { 
    count: -1, 
    next: function() { 
     if (image.count == (images.length) - 1) return false; 
     image.count += 1; 
     $('imageGallery').innerHTML = "<img src=\"" + images[image.count] + "\"\/>"; 
    }, 
    previous: function() { 
     if (image.count <= 0) return false; 
     image.count -= 1; 
     $('imageGallery').innerHTML = "<img src=\"" + images[image.count] + "\"\/>"; 
    } 
}; 

foward = image.next; 
back = image.previous; 
$('next').addEventListener("click", foward); 
$('before').addEventListener("click", back);

關於這一點的最好的事情是，你有要做的是添加一個新的圖像URL到數組，它仍然會工作。如果你想改變圖像，但不是所有的div內容，我建議把圖像庫外的另一個div。

來源

2011-04-22 01:16:57 0x499602D2

如何更改div的內容

回答

相關問題