使用javascript重新加载div的内容

Question

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

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

但问题是，div标签包含数千行，当我尝试acomplish的DIV-重装与以前的功能，浏览器将被冻结。我正在寻找一个解决方案，但我发现所有使用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'; 
}