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

我知道当页面加载时 document.write() 被调用 这个链接. 。所以绝对不是持续更新网页的方式。实现我想做的事情的最佳方法是什么？

完全是Javascript新手。谢谢。

百合

Answer 1

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

我将首先查看jQuery库。这将为您节省很多痛苦。

您要做的是使用EG将插入线插入表格：

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

Answer 3

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

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

使用DOM来更新页面应导致的开销要少，而不是简单地将更多的HTML串入其中。查找您要放入更新的节点，并在每个后续添加中进行附录。

Answer 5

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