使用 javascript 重新加载 div 的内容

Question

我试图在单击按钮时重新加载 div 标记的内容。我可以使用以下方法来做到这一点：

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

但问题是， div 标记包含数千行，当我尝试使用之前的函数完成 div 重新加载时，浏览器将被冻结。我正在 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';
}