使用javascript重新加载div的内容

Question

我试图在单击按钮时重新加载div标签的内容。 我可以使用：

function reload_div()
{   
    document.getElementById('div_id').innerHTML = 'blah blah blah';
}

但是问题是， div标签包含数千行，并且当我尝试使用以前的功能完成div-reloading时，浏览器将被冻结。 我一直在寻找关于stackoverflow的解决方案，但发现的全部是使用ajax或jquery的，而我之前从未使用过这些库。 因此，我可以仅使用javascript和html重新加载div内容吗？ 谢谢。

Answer 1

我不确定为什么首先要使用javascript加载这么多内容，但是您始终可以将javascript放在外部文件中，以便浏览器可以对其进行缓存。 如果是由浏览器加载导致页面冻结的脚本，那应该会有所帮助。

请随意发布更多代码，如果这样做对您不利，我将看一看。

Answer 2

您无法完全“刷新”我不认为的内容，我从未听说过。 （但是，我不是专家）但是，我听说过用javascript切换内容，请尝试以下链接：

这是内容的按钮和div：

<a href="divrefresh()">Refresh it!</a>
<div id="content"><p>Some Stuff!</p></div>

这是js的基础，您在链接中上面使用了一个函数。

function divrefresh() {
     document.getElementById('content').innerHTML = "Some new stuff!"
}

ETA：糟糕，我现在看到您的其余帖子。 我不确定为什么会冻结浏览器。 试试jQuery，它真的很容易使用，这就是每个人都喜欢它的原因。 如果您找到了jQuery解决方案，我将毫不犹豫地尝试一下！ 发布它，我可以为您提供帮助。

如果您真的不想使用jQuery或Ajax，那么我认为唯一的解决方案是将这些行放入自己的HTML文档中，使用iframe，然后刷新iframe。

Answer 3

您可以通过多种方式尝试使用removeChild （我不确定以下代码是否会冻结浏览器，但值得尝试）：

1）

function reload_div() {
    // Remove all child nodes from div first
    var div = document.getElementById('div_id');
    while (div.firstChild) {
        div.removeChild(div.firstChild);
    }

    document.getElementById('div_id').innerHTML = 'blah blah blah';
}

2）

function reload_div() {
    // Remove the div first
    var parent = document.getElementById('div_id').parentNode;
    parent.removeChild(document.getElementById('div_id'));

    // Recreate the div
    var div = document.createElement('div');
    div.setAttribute('id', 'div_id');

    // Append the div to the parent
    parent.appendChild(div);

    document.getElementById('div_id').innerHTML = 'blah blah blah';
}