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切换内容，试试这个链接：

这是你的按钮＆amp; 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';
}

使用javascript重新加载div的内容

3 个答案: