JavaScript appendした要素について

前提・実現したいこと

JavaScriptでappendされた要素について質問があります

a=document.createElement("div");
a.id="abc";
a.style.width="100%";
a.style.height="100%";
document.body.appendChild(a);

この追加した要素を削除するのは、
removeChild(document.getElementById("abc"));
abc.innerHTML="";
どちらが正しいのでしょうか、どちらでもいいんでしょうか？
innerHTML=""にした場合、id="abc"の要素は破壊されたとみていいんでしょうか？
破壊されたとして、innerHTML=""をしたあとに同じidを生成した場合に、
前のabcは完全に消えており、新たなabcができあがってるという認識でいいでしょうか？

2つ目の質問です

a=document.createElement("div");
a.id="abc";
a.style.width="100%";
a.style.height="100%";
document.body.appendChild(a);

b=document.createElement("div");
b.style.width="100%";
b.style.height="100%";
a.appendChild(b);

これと

a=document.createElement("div");
a.id="abc";
a.style.width="100%";
a.style.height="100%";
document.body.appendChild(a);

b=document.createElement("div");
b.style.width="100%";
b.style.height="100%";
abc.appendChild(b);

これはどちらが正しい書き方なんでしょうか？

よろしくお願いいたします

yambejp

2021/02/07 03:07 編集

idのabcで指定するのでしょうか?

aaz

2021/02/07 03:16

予約語か何かだったでしょうか

aaz

2021/02/07 03:18

abcは使えないだろという意味だと思います申し訳ありません

meg_

2021/02/07 03:18

コードは実際に試されましたか？

aaz

2021/02/07 03:20

はい innerHTML、removeChildのどちらでも動いていると認識してますが再確認の意を込めての質問となります

meg_

2021/02/07 03:25

> innerHTML、removeChildのどちらでも動いていると認識してますがどちらのコードでも実行後のhtmlからa要素は削除されていた、という実行結果ですか？

aaz

2021/02/07 03:26

コンソールの味方がわかりませんが、削除後に動作していたのでできてるんじゃないかレベルの認識です

aaz

2021/02/07 03:27

明確な答えをお持ちであればよろしくお願いいたします

行動規範の内容に同意します

回答2件

ベストアンサー

1つ目: `removeChild()` と `abc.innerHTML = ''` のどちらが正しいか

removeChild() です。後者は、要素 abc の子供ノードはツリーから切り離されますが、abc は親要素にくっついたままです。

2つ目: 変数 'a' で参照するか、id名 `abc` で参照するか

後者も規格で保証されている動作です。id 属性がついていてdocumentのツリーに含まれている要素は変数宣言なしでid名で参照できます。
どちらも正しいですが、どちらかというと前者のほうが好ましいです。後者は、変数宣言されてない名前を使われるとコードが読みにくくなるとか、documentのツリーから外れると参照できなくなるとか、同じid名の要素が複数できてしまったときに極めてデバッグしにくくなるとかのデメリットがあります。

投稿2021/02/07 07:05

int32_t

総合スコア21008

aaz

2021/02/07 17:54

回答ありがとうございました appendChildで100個追加したとします。追加したこの要素を一括削除する方法はないんでしょうか？

aaz

2021/02/07 18:33

親を削除すれば子もすべて削除される、それはremoveで可能でしょうか？

行動規範の内容に同意します

質問の意図がわかりませんが、作成したdomはインスタンスに
保持されるのでメモリに残っています

javascript
1<head>
2<script>
3window.addEventListener('DOMContentLoaded', ()=>{
4  var a=document.createElement("div");
5  a.id="abc";
6  document.body.appendChild(a);
7  var abc=document.getElementById('abc');
8  document.body.innerHTML="";
9  document.body.appendChild(abc);
10  document.body.removeChild(abc);
11  document.body.appendChild(abc);
12});
13</script>
14</head>
15<body>
16</body>