Question

我想要做的是：一个不断更新内容的网页。（在我的情况下，每2秒更新一次）新内容被附加到旧内容而不是覆盖。

这是我的代码：

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>",
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>"
);
var number = 0;
function send_msg()
{
 document.write(number + " " + msg_list[number%4]+'<br/>');
 number = number + 1;
}
var my_interval = setInterval('send_msg()', 2000);

但是，在IE和Firefox中，只打印出一行，页面将不再更新。有趣的是，在Chrome中，这些线条正在不断打印出来，这正是我所期待的。

我知道在根据this link加载页面时会调用document.write（）。所以绝对不是连续更新网页的方式。什么是实现我想做的最佳方式？

Javascript中的新手。谢谢。

莉莉

Answer 1

我首先看一下jQuery库。这将为您带来很多痛苦。

您要做的是使用例如：

将插入的行保留在表格中

$('table tbody').append('<tr><td>some value</td></tr>');

Answer 2

我会有一个div或其他容器，如下所示：

<div id="msgDiv"></div>

然后像使用.innerHTML一样写信给它，就像这样：

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>",
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>"
);
var number = 0;
function send_msg()
{
    document.getElementById("msgDiv").innerHTML += number + " " + msg_list[number%4]+'<br/>';
    number++;
}
var my_interval = setInterval(send_msg, 2000);

You can see a working example of this here

Answer 3

您可以附加到innerHTML媒体资源：

var number = 0;
function send_msg()
{
    document.getElementById('console').innerHTML += (number + " " + msg_list[number%4]+'<br/>');
    number = number + 1;
}

此代码会将消息附加到ID为console的元素，例如

<div id="console"></div>

顺便说一句，用字符串调用setInterval是不好的做法。

相反，传递函数本身，如下所示：

var my_interval = setInterval(send_msg, 2000);

Answer 4

这将是您学习一点DOM编程的绝佳机会。

使用DOM更新页面应该比简单地将更多HTML连接到页面中的开销更少。找到要将更新放入的节点，并在每次后续添加时执行appendChild。

Answer 5

此问题的答案可能会有所帮助：What's a simple way to web-ify my command-line daemon?

在javascript中附加到网页

5 个答案: