質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.96%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 565
sushimeme

sushimeme

score 7

前提・実現したいこと

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

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

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

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

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
　　　　　<title>質問</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="js1w3school.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

<body>
<script>
window.onload = function() {

//create topnav
var toplink=['HTML ','CSS ','JAVASCRIPT ','SQL ','BOOTSTRAP ','HOWTO ','JQUERY ','W3.CSS ','PYTHON ','XML ','MORE ',];
            for (var i=0; i<11; i++){
                var div=document.createElement("div");
                div.className='sample';
                var toptag=document.createElement("a");
                toptag.textContent= (toplink[i]);
 //add div 追記を試みた箇所です
                toptag.classList.add("topnav");
                document.body.appendChild(toptag);
                div.appendChild(a);
                document.getElementId('wrapper').appendChild(div);

                console.log(toptag.classList);
            }





    //create sidenav

            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',];
            for (var i=0; i<17; i++){
                var sidetag=document.createElement("a");
                sidetag.classList.add("sidenav")
                sidetag.textContent=(sidelink[i]);
                document.body.appendChild(sidetag);
//追記箇所
                toptag.classList.add("topnav");
                document.body.appendChild(toptag);
                div.appendChild(a);
                document.getElementId('wrapper').appendChild(div);
                console.log(sidetag.classList);
            }
</script>
<div id="wrapper"></div>
</body>
</html>

試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

+1

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

window.addEventListener('DOMContentLoaded', function(e){
  var toplink=['HTML ','CSS ','JAVASCRIPT ','SQL ','BOOTSTRAP ','HOWTO ','JQUERY ','W3.CSS ','PYTHON ','XML ','MORE ',];
  for (var i=0; i<11; i++){
    var div=document.createElement("div");
    div.className='sample';
    var toptag=document.createElement("a");
    toptag.textContent= (toplink[i]);
    toptag.classList.add("topnav");
    document.body.appendChild(toptag);
    div.appendChild(toptag);//div.appendChild(a);
    document.getElementById('wrapper').appendChild(div);
    console.log(toptag.classList);
  }
  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',];
  for (var i=0; i<17; i++){
    var sidetag=document.createElement("a");
    sidetag.classList.add("sidenav");
    sidetag.textContent=(sidelink[i]);
    document.body.appendChild(sidetag);
    toptag.classList.add("topnav");
    document.body.appendChild(toptag);
    div.appendChild(toptag);
    document.getElementById('wrapper').appendChild(div);
    console.log(sidetag.classList);
  }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

checkベストアンサー

0

document.getElementById('class名')

getElementById はget Element By Id なのでidでしか要素を取得しません。

クラスは Document.getElementsByClassName() を使うか、Document.querySelector() や Document.querySelectorAll() を使ってください。

【Document.getElementById() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 89.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る