javascript - 无法用另一组图像内容更改 div 图像内容

Question

我在 div 中连续放置了一组图像。

样本

<div id="divd">
<img src="images/A.png" />
<img src="images/B.png" />
<img src="images/C.png" />
<img src="images/D.png" />
<img src="images/E.png" />
<img src="images/F.png" />
<img src="images/G.png" /> 
<img src="images/H.png" />
<img src="images/I.png" /> 
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.png" /> 
<img src="images/M.png" />
<img src="images/N.png" />
<img src="images/O.png" />
<img src="images/P.png" />
<img src="images/Q.png" />
<img src="images/R.png" />
<img src="images/S.png" />        
<img src="images/T.png" />
<img src="images/U.png" />
<img src="images/V.png" />
<img src="images/W.png" />
<img src="images/X.png" />
<img src="images/Y.png" />
<img src="images/Z.png" />
</div>
<button onclick='changeMe()'>Click It</button>

我想用另一组图像替换这个 div 我该如何替换它。

我的小提琴编码在这里。

Answer 1

阅读 jQuery .html() 属性 -> http://api.jquery.com/html/

Answer 2

试试这个：

var toggle;

function changeMe() {
    toggle = !toggle;
    if (toggle) {
        document.getElementById('divd').innerHTML = "<a href='www.google.com'>Hello</a>";
    } else {
        document.getElementById('divd').innerHTML = '<img src="images/A.Png" /><img src="images/B.Png" /><img src="images/C.Png" /><img src="images/D.Png" /><img src="images/E.Png" /> <img src="images/F.Png" /><img src="images/G.Png" />  <img src="images/H.Png" /><img src="images/I.Png" /> <img src="images/J.Png" /> <img src="images/K.Png" /><img src="images/L.Png" /><img src="images/M.Png" /><img src="images/N.Png" /><img src="images/O.Png" /><img src="images/P.Png" /><img src="images/Q.Png" /><img src="images/R.Png" /> <img src="images/S.Png" /><img src="images/T.Png" /><img src="images/U.Png" /><img src="images/V.Png" /><img src="images/W.Png" /><img src="images/X.Png" /><img src="images/Y.Png" /><img src="images/Z.Png" />';
    }
}

小提琴