在 javascript 中附加到网页

Posted 2023-02-16

【中文标题】在 javascript 中附加到网页

【英文标题】：Append to a webpage in javascript

【发布时间】：2011-02-13 14:00:15

【问题描述】：

我想做的是：一个内容不断更新的网页。 （在我的情况下是每 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 中，这些行被连续打印出来，这正是我要寻找的。​​p>

我知道根据this link加载页面时会调用document.write()。所以这绝对不是不断更新网页的方式。实现我想做的最好的方法是什么？

完全是 javascript 的新手。谢谢。

百合

【参考方案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); 

You can see a working example of this here

【讨论】：

@Nick，我之前想过你的解决方案，但问题是只会显示一行，新的会覆盖旧的。我要做的是打印出所有可用的行~

@Lily - 情况并非如此......试试这个例子，你使用+= 而不是= 并且它附加了。

你是对的！当我第一次查看您的解决方案时，我错过了 += 。对不起我的粗心！ ;-)

【参考方案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>

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

改为传递函数本身，如下所示：

var my_interval = setInterval(send_msg, 2000); 

【讨论】：

额外的()在那里的间隔调用:)

另外值得指出的是，new Array('a','b','c') 是一种定义数组的 n00b 方式——var msg_list = ['a','b','c']; 更简洁。 :-)

@Mar，第一眼你就知道我是 100% 新手~哈哈~ ;-) 谢谢你的提示！

【参考方案3】：

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

您要做的是将插入的行保留在表格中，例如：

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

【讨论】：

他提到他是个 JavaScript 菜鸟。最好让他只使用 nilla javascript 来学习它，然后学习如何在 jQuery 中完成它。

我不同意。如果你不需要，为什么要经历所有的痛苦。这就像在学习 c 之前先学习汇编程序。

我不同意。这就像在学习 Java 之前先学习汇编程序一样。

哦，伙计们 - 纯 JavaScript 没有 像 Assembler - 对 javascript 的基本理解是正确使用 jQuery 的重要基础。

我的观点仍然成立。当您不需要时，为什么要为不同的浏览器不兼容而苦苦挣扎？为什么你认为 javascript 花了 15 年才成为流行的解决方案？

【参考方案4】：

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

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

【参考方案5】：

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