HTMLタブに下のコードを貼り付けてください。
<button id="summonBtn">召喚！</button>
<div id="stage"></div>
JSタブに下のコードを貼り付けてください。
const btn = document.querySelector('#summonBtn');
const stage = document.querySelector('#stage');
btn.addEventListener('click', function() {
const spirit = document.createElement('p');
spirit.textContent = '✨ 精霊が現れた！';
stage.appendChild(spirit);
});
ボタンをクリックして、「✨ 精霊が現れた！」という文字が増えていくことを確認してください。
このミッションでは 「新しい要素をJSで作って追加する」 という新しい仕組みが登場します。
document.createElement('p')：部品を工作するconst spirit = document.createElement('p');
「p タグという部品を新しく工作して、spirit と名付ける」という意味です。
この時点ではまだ画面には表示されていません。作業台の上に部品を置いただけの状態です。
spirit.textContent = '✨ 精霊が現れた！'：部品に文字を書くspirit.textContent = '✨ 精霊が現れた！';
「作った部品（spirit）に文字を書く」という意味です。
stage.appendChild(spirit)：部品を展示台に貼り付けるstage.appendChild(spirit);
「stage（展示台）の中に spirit（部品）を貼り付ける」という意味です。この行が実行されて初めて、画面に文字が表示されます。
3ステップの流れをまとめると：
1. createElement('p') → 部品を工作する（まだ画面に出ない）
2. spirit.textContent = '…' → 部品に文字を書く
3. stage.appendChild(spirit)→ 展示台に貼り付ける（ここで画面に出る）
変える場所は1行だけです。
spirit.textContent = '✨ 精霊が現れた！'; ← ここの文字を変える
'✨ 精霊が現れた！' の部分を好きな文章に変えてみましょう。
「1体目の精霊」「2体目の精霊」のように、何体目かを表示できますか？
ヒント：「003. 数を刻む石板」で学んだ「count（黒板）」の仕組みが使えます。ボタンを押すたびに count を1増やし、spirit.textContent の中に count の値を組み込んでみましょう。
難しければスキップして先に進んでも大丈夫です。