Добавить на веб-страницу в 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

Это была бы отличная возможность для вас немного освоить программирование DOM.

Использование DOM для обновления страницы должно привести к меньшим издержкам, чем просто конкатенация большего количества HTML в нее. Найдите узел, в который вы хотите поместить обновления, и выполните appendChild для каждого последующего добавления.

Answer 2

Вы можете добавить к свойству innerHTML:

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

Этот код добавит сообщение к элементу с идентификатором console, например

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

Кстати, это плохая практика - вызывать setInterval со строкой.

Вместо этого передайте саму функцию, например так:

var my_interval = setInterval(send_msg, 2000); 

Answer 3

Я бы начал с просмотра библиотеки jQuery. Это избавит вас от боли.

Что вы хотите сделать, это сохранить вставленные строки в таблицу, используя, например,

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

Answer 4

У меня будет 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 5

Ответы на этот вопрос могут быть полезны: Какой простой способ подключить мой демон командной строки к сети?