JavaScriptのWebページに追加されます

Question

私がやりたいのは、コンテンツを継続的に更新するWebページです。 （私の場合、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の両方で、1行のみが印刷されており、ページはもう更新されません。興味深いことに、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 Libraryを見ることから始めます。これはあなたに多くの痛みを救います。

あなたがしたいのは、例：を使用して、挿入された線をテーブルに保つことです。

$('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を単に連結するよりも、オーバーヘッドが少なくなります。更新を入れたいノードを見つけ、その後の追加の各追加でappentchildを実行します。

Answer 5

この質問に対する答えは役立つかもしれません： 私のコマンドラインデーモンをWebに合わせて簡単な方法は何ですか？