JavaScriptでのfor文による要素の追加

●やりたい事
・div id="result" 配下に id="1","2","3","4"とする4つのdiv要素を追加したい。
・for文にて繰り返し処理する。

●質問内容
for文で回した後に、要素が追加されたか確認のため、
document.getElementById("1").textContent += 111;
にて確認したところ、「null is not object」
になりました。

1.以下のコードでid="1","2","3","4"とする4つのdiv要素は追加されているのでしょうか？

2.また追加されていない場合は、何処を修正すれば、追加されるのでしょうか？

(※語彙力が無くて申し訳ございません。)

<!DOCTYPE html><html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
</head>
<body>

  <div id="result"></div>

  <script>

const name =["1","2","3","4"];

for(var item of name) {

const results = document.getElementById("result");

item = document.createElement('div');

item.id = item; 
results.appendChild(item);

//要素が追加されたか確認
document.getElementById(item).textContent += "テスト";

}

//要素が追加されたか確認
document.getElementById("1").textContent += 111;

</script>
</body>
</html>

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

回答4件

javascript
1for(var item of name) {
2
3const results = document.getElementById("result");
4
5item = document.createElement('div');

itemを上書きしてしまっているので、意図したように動作しないものと思われます。

投稿2019/11/15 02:08

maisumakun

総合スコア145975

ベストアンサー

~~まず第一に、HTMLの仕様におけるidは、数字のみ、頭文字が数字は許可されておりません。~~
上記は、古い情報だったようで、現代（HTML5以降）においては許可されているようです。

[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 · GitHub
（公式ではないですが、公式の引用があるので、かなり信用できる内容です）
~~また、実際に使用しても、~~
ただし、CSSがきかない~~、JSでのコントロールでエラーが起きたりなど、~~という弊害がでます。
（CSSでコントロールしない限りは大丈夫かと思います）
~~（HTMLでid定義した要素は、JavaScript上で、そのid名だけで取得できる→JavaScriptでは数値が頭文字の変数定義は許可されていない、など）~~

では、上記を踏まえた上で回答に移らせていただきます。

javascript
1const name =["1","2","3","4"];
2// 挿入したい要素は取得は一回でいいので、forの外側に移動
3const results = document.getElementById("result");
4
5for(var item of name) {
6  // この時点で、itemの中身が変わってしまっている
7  // item = document.createElement('div');
8  // なので、下記に変更
9  const newItem = document.createElement('div');
10  
11  // itemを代入し直してないので、下記のようにidを変えたい要素の変数を変更でオーケー
12  newItem.id = item;
13  // appendChildさせる要素を、今回追加した変数に変更
14  results.appendChild(newItem);
15
16  //要素が追加されたか確認
17  document.getElementById(item).textContent += "テスト";
18}
19
20//要素が追加されたか確認
21document.getElementById('1').textContent += 111;

投稿2019/11/15 02:23

編集2019/11/15 03:24

miyabi_pudding

総合スコア9555

maisumakun

2019/11/15 02:27

当該文書にもあるように、HTML5では「数字始まりのid」も公認されるに至っています（自分自身、回答しようとして最新の事情を調べて気づきました）。

miyabi_pudding

2019/11/15 02:36

maisumakunさん>なんと。ありがとうございます。回答修正します。

miyabi_pudding

2019/11/15 02:45

maisumakunさん> 検証したところ、 CSSでは、数値のみのIDでは、コントロールに弊害がでるのは今も変わらないようです。しかし、最新の情報、常にチェックしないとですね・・・。

tetsu777

2019/11/22 02:27

ベストアンサー決定遅くなり申し訳ございません。仕様による変更があったとの事ですが、コード記載も頂き、大変分かり易い解説をしていただきましたので、ベストアンサーに選ばせて頂きました。この度はありがとうございました。

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

1.以下のコードでid="1","2","3","4"とする4つのdiv要素は追加されているのでしょうか？

いいえ。id など設定されていない div要素が追加されています。
理由は、maisumakunさんが述べてます。
また、他の回答者さん全員がコードで示してくれています。

2.また追加されていない場合は、何処を修正すれば、追加されるのでしょうか？

変数名の決め方に、ルール付けして習慣にするといいですよ。

配列を扱う変数名は複数形の単語を意識した names に修正
for で回す要素などは単数形 name に修正
DOM要素は elm や要素名 div に修正

(複数ある場合,末尾に数字を付与する：div1, div2, ..)

変数名を直感的に何かを理解できる英単語で命名するようにルール付けすれば、for で回す name に全く別のものを代入するなんてことはなくなります。命名に困ったら、Google先生に英単語を教えてもらえばいいです。

投稿2019/11/17 08:13

AkitoshiManabe

総合スコア5434

javascript
1<div id="result"></div>
2<script>
3const name =["1","2","3","4"];
4const results = document.getElementById("result");
5for(var i of name) {
6  const item = document.createElement('div');
7  item.id = i; 
8  results.appendChild(item);
9  document.getElementById(i).textContent = "テスト";
10}
11document.getElementById("1").textContent += 111;
12</script>