使用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';
}