javascript コードの位置で挙動が変わる

Question

コードvar parent_text = document.querySelector('.q12-result');
var btn_12 = document.querySelector('.q12-btn');
 btn_12.addEventListener('click',function(){
  var child_p = document.createElement('p');
  child_p.textContent = 'Google';
   parent_text.appendChild(child_p);
 })

コードvar parent_text = document.querySelector('.q12-result');
var btn_12 = document.querySelector('.q12-btn');
  var child_p = document.createElement('p');
 btn_12.addEventListener('click',function(){
  child_p.textContent = 'Google';
   parent_text.appendChild(child_p);
 })
``


```html
コード <div>
    <p>Q12</p>
    <p>
      ボタンがクリックされたときに、<br>
      押されたボタンと同じテキストを持つ、<br>
      pタグを作成して画面に表示する
    </p>
    <br>
    <button class="q12-btn">Google</button>

    <div class="q12-result"></div>

  </div>

googleの表示が一つ目のコードだとクリックされた回数分でるのに対して、二つ目のコードだと一回しかでないのはどうしてでしょうか？
ご教授いただければ幸いです。

Answer 1

1つ目のコードは.q12-btnのボタンを押すたびに、child_pという要素を新たに作り出して.q12-resultの要素に対してappendChild()を実行しているためです。

2つ目はchild_pをグローバル変数として先に定義しているため、2回目以降のappendChild()で追加しようとしても同じ要素だと判定されてしまうためです。

• MDN | Node.appendChild()

上記のリファレンスからの引用になりますが、

追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます

この仕様が反映されているためです。

Comments

[ShinKoba]

そういう事だったんですね。
ありがとうございます。