JavaScript appendChild

Question

前提・実現したいこと

JavaScriptのappendChildについての質問です

親要素にappendChildで追加した要素をinnerHTMLで親を空にした場合、
追加された要素は親からは外れますがidは残っていると理解しました

DOM上に重複したIDは生成できないため、必ず削除する必要があると思うのですが、
削除せず同じIDを追加した場合にも問題なく動作するのはなぜでしょうか

下記ソースは赤色のboxにidをaとして、
その一秒後にinnerHTMLで画面から消し、
青色のボックスをid="a"として追加し、
a.style.background="green"で緑にしています

innerHTMLで画面から消した場合、元あったaは残り続けるので
再度aを追加した場合

<div id="a" style="background:blue;width:300;heigt:300"></div> <div id="a" style="background:red;width:300;heigt:300"></div> となりますよね

のちに、id="a"を緑に変更しているのですが、
新たに追加されたaに対して、a.style.background='green'が動いてるとみていいんですか
idが重複してDOMに存在してるので、二つあるうちの一つであるaが緑になっているという解釈でいいんでしょうか？

該当のソースコード

<div id="p"></div>
<input type="button" value="add" onclick="a=document.createElement('div');a.id='a';a.style.width='300px';a.style.height='300px';a.style.background='red';p.appendChild(a);setTimeout('p.innerHTML=\'\';a=document.createElement(\'div\');a.id=\'a\';a.style.width=\'300px\';a.style.height=\'300px\';a.style.background=\'blue\';p.appendChild(a);a.style.background=\'green\'',1000);">

Answer 1

親要素にappendChildで追加した要素をinnerHTMLで親を空にした場合、

追加された要素は親からは外れますがidは残っていると理解しました

DOM上に重複したIDは生成できないため、必ず削除する必要があると思うのですが、

「親から外れる」ということは、すなわち「DOMツリーから外れる」ということです。文書に存在しないHTML要素がどんなidを持とうが、全く無関係です。

Comments

[maisumakun]

> innerHTMLで画面から消した場合、元あったaは残り続けるので
再度aを追加した場合
<div id="a" style="background:blue;width:300;heigt:300"></div>
<div id="a" style="background:red;width:300;heigt:300"></div>
となりますよね

なりません。