class名付きのdiv内にaを追加してループさせたい

前提・実現したいこと

JavaScriptのみでHTML要素を描画したい。

JavaScriptのDOMのみでサイト画面を模写しています。
トップメニューとサイドメニューのa要素はfor文で生成しました。

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

トップメニュー、サイドメニューのa要素をそれぞれclass名を追記したdiv内に追加したいのですが、
for文の中にvar div=createElement('div');
div.className='topdiv';
document.getElementById('class名').appendChild(div);を
for文に追加するとこれまで描画していたa要素が全て消えてしまいます。

エラーメッセージ

該当のソースコード

JavaScript,html,css
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4　　　　　<title>質問</title>
5        <meta charset="utf-8">
6        <link rel="stylesheet" href="js1w3school.css">
7        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
8    </head>
9 
10<body>
11<script>
12window.onload = function() {
13
14//create topnav
15var toplink=['HTML ','CSS ','JAVASCRIPT ','SQL ','BOOTSTRAP ','HOWTO ','JQUERY ','W3.CSS ','PYTHON ','XML ','MORE ',];
16            for (var i=0; i<11; i++){
17                var div=document.createElement("div");
18                div.className='sample';
19                var toptag=document.createElement("a");
20                toptag.textContent= (toplink[i]);
21 //add div 追記を試みた箇所です
22                toptag.classList.add("topnav");
23                document.body.appendChild(toptag);
24                div.appendChild(a);
25                document.getElementId('wrapper').appendChild(div);
26                
27                console.log(toptag.classList);
28            }
29            
30
31
32    
33    
34    //create sidenav
35   
36            var sidelink=['HTML5 Tutorial','HTML Home','HTML Introduction','HTML Editors','HTML Basic','HTML Elements','HTML Attributes','HTML Headings','HTML Paragraphs','HTML Styles','HTML Formatting','HTML Quotations','HTML Comments','HTML Colors','HTML CSS','HTML Links','HTML Images',];
37            for (var i=0; i<17; i++){
38                var sidetag=document.createElement("a");
39                sidetag.classList.add("sidenav")
40                sidetag.textContent=(sidelink[i]);
41                document.body.appendChild(sidetag);
42//追記箇所
43                toptag.classList.add("topnav");
44                document.body.appendChild(toptag);
45                div.appendChild(a);
46                document.getElementId('wrapper').appendChild(div);
47                console.log(sidetag.classList);
48            }
49</script>
50<div id="wrapper"></div>
51</body>
52</html>

試したこと

for文内でclass名を追加したdivを生成しその中にaを入れようと試みました。

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

回答2件

たんなる凡ミスっぽいですけどね

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var toplink=['HTML ','CSS ','JAVASCRIPT ','SQL ','BOOTSTRAP ','HOWTO ','JQUERY ','W3.CSS ','PYTHON ','XML ','MORE ',];
3  for (var i=0; i<11; i++){
4    var div=document.createElement("div");
5    div.className='sample';
6    var toptag=document.createElement("a");
7    toptag.textContent= (toplink[i]);
8    toptag.classList.add("topnav");
9    document.body.appendChild(toptag);
10    div.appendChild(toptag);//div.appendChild(a);
11    document.getElementById('wrapper').appendChild(div);
12    console.log(toptag.classList);
13  }
14  var sidelink=['HTML5 Tutorial','HTML Home','HTML Introduction','HTML Editors','HTML Basic','HTML Elements','HTML Attributes','HTML Headings','HTML Paragraphs','HTML Styles','HTML Formatting','HTML Quotations','HTML Comments','HTML Colors','HTML CSS','HTML Links','HTML Images',];
15  for (var i=0; i<17; i++){
16    var sidetag=document.createElement("a");
17    sidetag.classList.add("sidenav");
18    sidetag.textContent=(sidelink[i]);
19    document.body.appendChild(sidetag);
20    toptag.classList.add("topnav");
21    document.body.appendChild(toptag);
22    div.appendChild(toptag);
23    document.getElementById('wrapper').appendChild(div);
24    console.log(sidetag.classList);
25  }
26});
27