Присоединяйтесь к веб-странице в JavaScript

Question

То, что я хочу сделать, это так: веб-страница с постоянно обновляющим содержание. (В моем случае обновляется каждые 2S) Новый контент добавляется к старому вместо перезаписи.

Вот код у меня есть:

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;
}

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

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

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

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

var my_interval = setInterval(send_msg, 2000); 

Answer 2

Я бы начал с поиска библиотеки jQuery. Это сэкономит вам большую боль.

То, что вы хотите сделать, это продолжать вставленные линии в таблицу, используя, например:

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

Answer 3

У меня был бы дивер или какой-то другой контейнер, как это:

<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

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