Javascript 取得した要素に要素を正しく挿入したい

取得した要素に正しい順番に配列を挿入したい

ここに質問の内容を詳しく書いてください。
現在Javascriptの初学者です。
取得した要素に配列を挿入する際に正しい順番に挿入されないので疑問に感じました。

発生している問題・エラーメッセージ

歯医者に行く牛乳を買う勉強会の申し込みデータ整理デザインカンプの作成
の順で表示されます。

Javascript
1```Javascript
2<!doctype html>> - 
3<html>
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width,initial-scale=1">
7<title>テンプレート</title>
8<link href="../../_common/images/favicon.ico" rel="shortcut icon">
9<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
10<link href="../../_common/css/style.css" rel="stylesheet">
11</head>
12<body>
13<header>
14<div class="container">
15<h1>タイトル</h1>
16<h2>サブタイトル</h2>
17</div><!-- /.container -->
18</header>
19<main>
20<div class="container">
21<section>
22<h1>やる事リスト</h1>
23<ul id="list">
24
25</ul>
26
27</section>
28</div><!-- /.container -->
29</main>
30<footer>
31<div class="container">
32<p>JavaScript Samples</p>
33</div><!-- /.container -->
34</footer>
35<script>
36  'use strict';
37
38let todo =['デザインカンプの作成','データ整理','勉強会の申し込み','牛乳を買う']
39todo.push('歯医者に行く');
40for(let item of todo){
41  const li =  `<li>${item}</li>`;
42
43  document.getElementById('list').insertAdjacentHTML('afterend', li);
44}
45
46</script>
47
48</body>
49</html>
50

該当のソースコード

javascript
1
2<section>
3<h1>やる事リスト</h1>
4<ul id="list">
5
6</ul>
7
8</section>
9~
10let todo =['デザインカンプの作成','データ整理','勉強会の申し込み','牛乳を買う']
11todo.push('歯医者に行く');
12for(let item of todo){
13  const li =  `<li>${item}</li>`;
14
15  document.getElementById('list').insertAdjacentHTML('afterend', li);
16}
17

試したこと

beforebegin beforeend で正しい順番に表示されました

補足情報（FW/ツールのバージョンなど）

afterbegin afterend 上記の順になるのはなぜですか？

m.ts10806

2020/05/16 13:51

「正しい」は質問者の中だけのことなので、具体的にゴールを明示すべきかと思います。また、確認したいだけならCSS関係は不要な要素では？最小構成のコードで確認した方が問題に集中できますよ。

hiro.a

2020/05/16 14:58

わかりました。変更しておきます。

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

回答1件

ベストアンサー

for文一巡目で、

html
1<h1>やる事リスト</h1>  
2<!-- (1) -->
3<ul id="list">  
4<!-- (2) -->
5</ul>  
6<!-- (3) -->
7<li>デザインカンプの作成</li>
8<!-- (4) -->

となります。では二巡目で、上記コードのafterendがどこになるかといえば、(3)になるので、ここに「データ整理」が入ります。
これを繰り返せば、どういう順で追加されるかは自明だと思います。

ちなみに、afterbegin等ですが、

html
1<!-- beforebegin -->
2<ul id="list">  
3<!-- afterbegin -->
4<!-- beforeend -->
5</ul>  
6<!-- afterend -->

という一巡になるため、単純に「beforebegin beforeend で正しい順番に表示されました」と言ってもうまくいっていない可能性があるので、一度確認してみてください。

参考サイト：innerHTML より insertAdjacentHTML を使う

投稿2020/05/16 13:57

編集2020/05/16 14:05

yuuyu

総合スコア1139

hiro.a

2020/05/16 14:57

回答ありがとうございます。 beforebegin beforeend　で確認しましたがデザインカンプの作成、データ整理, 勉強会の申し込み, 牛乳を買う ,歯医者に行くで表示され、正しい表示となりました。 for文一巡目の説明が」よくわかりません。なぜその位置に<li>デザインカンプの作成</li>があり、なぜ<li>デザインカンプの作成</li>だけなのでしょうか？

yuuyu

2020/05/16 15:11

＞for文一巡目の説明がよくわかりません。 for文では、配列todo =['デザインカンプの作成','データ整理','勉強会の申し込み','牛乳を買う','歯医者に行く']; を元にループをしていると思います。それの一巡目、つまりtodoの第一要素（"デザインカンプの作成"）をitemに入れた状態です。なので、「<li>デザインカンプの作成</li>だけ」となります。もちろん二巡目にはtodoの第二要素（"データ整理"）が来ますので、同じように追加されていきます。＞なぜその位置に<li>デザインカンプの作成</li>があり document.getElementById('list').insertAdjacentHTML('afterend', li); にて、"afterend"の位置（解答元コードの3）に「<li>デザインカンプの作成</li>」を追加したからです。 . ＞beforebegin beforeend　で確認しましたが（中略）正しい表示となりました。見た目は正しい表示になっていると思いますが、意図している位置に代入されていない可能性があります。開発者ツール等で一度確認してみては如何でしょうか？

hiro.a

2020/05/17 01:05

なるほど！理解できました！ありがとうございます。開発者ツールで確認してみます！

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