JavaScriptのWebページに追加されます
-
02-10-2019 - |
質問
私がやりたいのは、コンテンツを継続的に更新する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の完全に初心者。ありがとうございました。
リリー
解決
に追加できます 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);
他のヒント
JQuery Libraryを見ることから始めます。これはあなたに多くの痛みを救います。
あなたがしたいのは、例:を使用して、挿入された線をテーブルに保つことです。
$('table tbody').append('<tr><td>some value</td></tr>');
私はこのような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);
これは、小さなDOMプログラミングを学ぶ絶好の機会になるでしょう。
DOMを使用してページを更新すると、より多くのHTMLを単に連結するよりも、オーバーヘッドが少なくなります。更新を入れたいノードを見つけ、その後の追加の各追加でappentchildを実行します。
この質問に対する答えは役立つかもしれません: 私のコマンドラインデーモンをWebに合わせて簡単な方法は何ですか?