重新加载 div javascript 只需要 ajax？答案

【问题标题】：reload div javascript only ajax needed?重新加载 div javascript 只需要 ajax？
【发布时间】：2015-05-11 07:23:17
【问题描述】：

请参考 JSFiddle 链接：https://jsfiddle.net/s11oo2gg/。我们这里不允许使用 jQuery 和 iframe。

现在的问题是，如果您先单击电阻器并将鼠标悬停在不同的内容图像上，然后通过单击 X 标记返回，则内容图像会卡在您离开的位置，并且无法正确加载其他内容图像。它会显示一个损坏的图片链接。

我喜欢每次点击<span class="closeButton">（X 标记）时只重新加载<div id="slider1_contain">，以便相应地加载目标内容图像。

我不想让location.reload(); 在单击 X 时解决此问题。我不想重新加载整个页面，而只想重新加载 div。

我看到人们问同样的问题并使用 AJAX 解决它。在这种情况下我需要 AJAX 吗？或者我们可以在下面的 javascript 中做些什么？

提前谢谢你！！

<script type="text/javascript"> 
        function showContent(target){
            document.getElementById(target).style.display = 'block';
            document.getElementById("boxThumb").style.display = 'none';
        }

        function hideContent(target){
        document.getElementById(target).style.display = 'none';
        document.getElementById("boxThumb").style.display = 'block'

        }
    </script>

<script type="text/javascript">
    var children = document.querySelectorAll('.toggle > section[id]');
    function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
    }
    </script>

【问题讨论】：

当点击“X”时，您希望发生什么当前没有发生的事情？如果您不需要从服务器获取内容，则不需要 Ajax。您应该能够使用客户端 javascript 隐藏和显示浏览器 DOM 的一部分。但是，我无法从您的问题中真正看出您到底想要什么帮助。\
javascript 正在按预期工作。但是，如果您首先单击“抵抗”并将所有三个可用图像悬停，然后单击“X”，然后单击“飞利浦超通量”，它将显示一个空白页面，直到将缩略图悬停在右下角。我只是喜欢它一点击就显示“1stdetailContent”，就像默认图片一样。

标签： javascript html ajax reload

【解决方案1】：

如果只想重新加载 div，可以使用innerHTML。

 document.getElementById(target).innerHTML = '<img src="image.jpg">';

【讨论】：

我不太明白，innerHTML是用来写文本的，如果我没记错的话，不是HTML内容。