JavaScript»ウェブ»jQuery応用編 1秒後に要素を表示する

ファイル名: js-web/quest_03204.html

下のソースコードを写して、1秒後に新しい要素が作成され、表示されるプログラムをつくってください。

ソースコード

<div id="canvas"></div>

<style type="text/css">
#canvas {
  border: solid 1px #ccc;
  width: 320px;
  height: 320px;
  background-color: white;
}
</style>

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script>
$(window).on('load', function() {
  $("#canvas").delay(1000).queue(function(){
    const div = document.getElementById("canvas");
    const content = document.createElement('p');
    content.textContent = '作成されたよ';
    div.appendChild(content);
  });
});
</script>

解説

delayは、次の処理の実行を指定した時間だけ遅らせます。時間の単位はミリ秒です。