在 javascript 中附加到网页

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 中，这些行被连续打印出来，这正是我正在寻找的。

我知道根据 此链接。所以绝对不是持续更新网页的方式。实现我想做的事情的最佳方法是什么？

完全是Javascript新手。谢谢。

百合

Answer 1

我会有一个 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); 

您可以在此处查看一个工作示例

Answer 2

您可以附加到 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>

By the way, it is bad Practice to call < code>setInterval 带有字符串。

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

var my_interval = setInterval(send_msg, 2000); 

Answer 3

我将从查看 jQuery 库开始。这将为您减轻很多痛苦。

您想要做的是将插入的行保留到表中，使用例如：

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

Answer 4

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

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

Answer 5

此问题的答案可能会有所帮助：什么是将我的命令行守护进程网络化的简单方法？