JavaScriptのdocumentオブジェクトを用いてHTMLを書くときのエラー

前提・実現したいこと

JavaScriptのdocumentオブジェクトを用いてHTMLを書いています。
元々のHTMLファイルと同じ表示をJavaScriptのdocumentオブジェクトで表したいです。
具体的には以下のサイトに近いと思いますが、イベントなどは起こさずに、
HTMLの中身をJavaScriptで設定しようとしているだけです。
参考サイト

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

JavaScriptで設定した部分の

var body = document.getElementById("body");
	var header = document.getElementById("header");
	var h1 = document.createElement('h1'); 
	h1.textContent = "サンプルページ";
	header.appendChild(h1);

の部分はブラウザで確認したときに元々のHTMLファイルと同様に表示されるのですが、
他の部分ではJavaScriptのdocumentオブジェクトでは表示が消えてしまい、
どの様に修正すればいいかわからず困っています。

該当のソースコード

JavaScriptのdocumentオブジェクトを用いて書いたもの

HTML
1<!DOCTYPE html>
2<html lang = "ja">
3<head>
4	<meta charset= "utf-8">
5	<title>サンプルページ</title>
6	
7</head>
8
9<body id = "body">
10	<header id = "header">
11	</header>
12
13	<nav class ="dropdown">
14		<ul>
15			<li><a href ="no1.html" id = "no1"></a></li>
16			<li><a href ="no2.html">その２</a></li>
17			<li><a href ="no3.html">その３</a></li>
18		</ul>
19	</nav>
20
21	<article>
22	<h2 id = "contents1"></h2>
23	<p id = "sentence1"></p>
24	<br>
25	<h2>内容２</h2>
26	<p id = "paragraph1">行１
27	<br>行２
28	<br>行３</p>
29	<br>
30	<h3>内容3</h3>
31	<p id = "paragraph2">行１
32		<br>行２</p>
33		<ul>
34		<ol>
35			<li>項目１</li>
36			<li>項目２</li>
37		</ol>
38		</ul>
39
40	<form>
41	<h2>フォーム</h2>
42		<div>
43			<lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
44			<label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
45			<input type="submit" value="submit">
46		</div>
47	</form>
48
49	</article>
50
51	
52	<footer id = "footer">
53		<ul>
54			<a href ="page1.html">他のページ１</a>
55			<a href ="page2.html">他のページ２</a>
56		</ul>
57		<small id = "copyright"></small>
58	</footer>
59
60	<!-- JavaScriptでDOM指定 -->
61	<script>
62	var body = document.getElementById("body");
63	var header = document.getElementById("header");
64	var h1 = document.createElement('h1'); 
65	h1.textContent = "サンプルページ";
66	header.appendChild(h1);
67
68	var nav = document.getElementsByClassName("dropdown");
69	var h2 = document.createElement("h2"); 
70	h2.textContent = "メニュー";
71	nav.appendChild(h2);
72	var no1 = document.getElementById("no1");
73	no1.textContent = "その１";
74	nav.appendChild(no1);
75
76	var article = document.getElementById("aricle");
77	var contents1 = document.createElement("contents1"); 
78	contents1.textContent = "内容１";
79	article.appendChild(contents1);
80	var sentence1 = document.createElement("sentence1"); 
81	sentence1.textContent = "文章１";
82	article.appendChild(sentence1);
83
84	var footer = document.getElementsByClassName("footer");
85	var copyright = document.getElementById("copyright");
86	copyright.textContent = "Copyright &copy ";
87	footer.appendChild(copyright);
88
89	</script>
90
91</body>
92</html>

元のHTML

HTML
1<!DOCTYPE html>
2<html lang = "ja">
3<head>
4    <meta charset= "utf-8">
5    <title>サンプルページ</title>
6    <link rel="stylesheet" href="sample.css" type="text/css" />
7</head>
8
9<body>
10    <header>
11    <h1>サンプルページ</h1>
12    </header>
13
14    <!-- menu -->
15    <nav class ="dropdown">
16        <h2>メニュー</h2>
17        <ul>
18            <li><a href ="no1.html">その１</a></li>
19            <li><a href ="no2.html">その２</a></li>
20            <li><a href ="no3.html">その３</a></li>
21        </ul>
22    </nav>
23
24    <!-- main content -->
25    <article>
26    <h2>内容１</h2>
27    <p>文章１</p>
28    <br>
29    <h2>内容２</h2>
30    <p id = "paragraph1">行１
31    <br>行２
32    <br>行３</p>
33    <br>
34    <h3>内容3</h3>
35    <p id = "paragraph2">行１
36        <br>行２</p>
37        <ul>
38        <ol>
39            <li>項目１</li>
40            <li>項目２</li>
41        </ol>
42        </ul>
43
44    <form>
45    <h2>フォーム</h2>
46        <div>
47            <lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
48            <label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
49            <input type="submit" value="submit">
50        </div>
51    </form>
52
53    </article>
54
55
56    <footer>
57        <ul>
58            <a href ="page1.html">他のページ１</a>
59            <a href ="page2.html">他のページ２</a>
60        </ul>
61        <small>Copyright &copy; </small>
62    </footer>
63
64</body>
65</html>

###修正後
ご回答を受けて、修正したものを掲載します。

HTML
1<!DOCTYPE html>
2<html lang = "ja">
3<head>
4    <meta charset= "utf-8">
5    <title>サンプルページ</title>
6
7</head>
8
9<body id = "body">
10    <header id = "header">
11    </header>
12
13    <nav id="dropdown" class ="dropdown">
14        <ul>
15            <li><a href ="no1.html" id = "no1"></a></li>
16            <li><a href ="no2.html" id = "no2"></a></li>
17            <li><a href ="no3.html">その３</a></li>
18        </ul>
19    </nav>
20
21    <article id="article">
22    <h2 id = "contents1"></h2>
23    <p id = "sentence1"></p>
24    <br>
25    <h2>内容２</h2>
26    <p id = "paragraph1">行１
27    <br>行２
28    <br>行３</p>
29    <br>
30    <h3>内容3</h3>
31    <p id = "paragraph2">行１
32        <br>行２</p>
33        <ul>
34        <ol>
35            <li>項目１</li>
36            <li>項目２</li>
37        </ol>
38        </ul>
39
40    <form>
41    <h2>フォーム</h2>
42        <div>
43            <lavel id = "name"><input type="text" size="15" name="name"></lavel><br>
44            <label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
45            <input type="submit" value="submit">
46        </div>
47    </form>
48
49    </article>
50
51
52    <footer id = "footer">
53        <ul>
54            <a href ="page1.html" id = "other1"></a>
55            <a href ="page2.html" id = "other2"></a>
56        </ul>
57        <small id = "copyright"></small>
58    </footer>
59
60    <!-- JavaScriptでDOM指定 -->
61    <script>
62    var body = document.getElementById("body");
63    var header = document.getElementById("header");
64    var h1 = document.createElement('h1'); 
65    h1.textContent = "サンプルページ";
66    header.appendChild(h1);
67
68    var nav = document.getElementById("dropdown");
69    var h2 = document.createElement("h2"); 
70    h2.textContent = "メニュー";
71    nav.appendChild(h2);
72    var no1 = document.getElementById("no1");
73    no1.textContent = "その１";
74    nav.appendChild(no1);
75    var no2 = document.getElementById("no2");
76    no2.textContent = "その2";
77    nav.appendChild(no2);
78
79    var article = document.getElementById("article");
80    var contents1 = document.createElement("contents1"); 
81    contents1.textContent = "内容１";
82    article.appendChild(contents1);
83    var sentence1 = document.createElement("sentence1"); 
84    sentence1.textContent = "文章１";
85    article.appendChild(sentence1);
86
87    var form = document.getElementById("form");
88	form.textContent = "フォーム";
89	article.appendChild(form);
90	var name = document.getElementById("name");
91	name.textContent = "氏名：";
92	form.appendChild(name);
93
94    var footer = document.getElementById("footer");
95    var other1 = document.getElementById("other1");
96	other1.textContent = "他のページ１";
97	footer.appendChild(other1);
98	var other2 = document.getElementById("other2");
99	other2.textContent = "他のページ2";
100	footer.appendChild(other2);
101    var copyright = document.getElementById("copyright");
102    copyright.textContent = "Copyright &copy ";
103    footer.appendChild(copyright);
104
105    </script>
106
107</body>
108</html>

<nav>, <form>, <footer>部分で元々のHTMLファイルと同様に表示されないという問題が発生しています。 <nav>の部分で全て一行で表示され、改行ができていないことに加え、HTMLの<li>タグにより「・」のみが表示されています。 ``` var no1 = document.getElementById("no1"); no1.textContent = "その１"; nav.appendChild(no1); var no2 = document.getElementById("no2"); no2.textContent = "その2"; nav.appendChild(no2); ``` <form>の部分では<input type="text">によりフォームの入力窓のみが表示されている状態です。 ```

var form = document.getElementById("form");
form.textContent = "フォーム";
article.appendChild(form);
var name = document.getElementById("name");
name.textContent = "氏名：";
form.appendChild(name);



<footer>部分の表示が全て一行で表示され、改行ができていません。

var footer = document.getElementById("footer");
var other1 = document.getElementById("other1");
other1.textContent = "他のページ１";
footer.appendChild(other1);
var other2 = document.getElementById("other2");
other2.textContent = "他のページ2";
footer.appendChild(other2);
var copyright = document.getElementById("copyright");
copyright.textContent = "Copyright &copy ";
footer.appendChild(copyright);

他のページ１他のページ2Copyright &copy

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

回答3件

var nav = document.getElementsByClassName("dropdown");
// ↑「getElements」で取得できるのは「HTMLCollection」(DOMElementの配列みたいなもの)
var h2 = document.createElement("h2"); 
h2.textContent = "メニュー";
nav.appendChild(h2);
// ↑「HTMLCollection」には「appendChild」できない。

nav[0].appendChild(h2);
// やるならこう。

var footer = document.getElementsByClassName("footer");
// ↑こっちも上と同じこと。

投稿2018/06/08 06:29

tkturbo

総合スコア5572

ベストアンサー

dropdownはすでにあるものを再利用したいのでしたら
以下の形で書き換える形で対応できそうです。

javascript
1    var nav = document.getElementById("dropdown");
2    var h2 = document.createElement("h2"); 
3    h2.textContent = "メニュー";
4    nav.insertBefore(h2, nav.firstChild);
5    var no1 = document.getElementById("no1");
6    no1.textContent = "その１";
7    var no2 = document.getElementById("no2");
8    no2.textContent = "その2";
9
10    var footer = document.getElementById("footer");
11    var other1 = document.getElementById("other1");
12    other1.textContent = "他のページ１";
13    var other2 = document.getElementById("other2");
14    other2.textContent = "他のページ2";
15    var copyright = document.getElementById("copyright");
16    copyright.textContent = "Copyright &copy ";

idがnameのタグはnameが命名規約違反のために処理エラーとなっているようです。
仮にaaaとした場合の記述が以下になります。
innerHTML で内容を書き換えないといけないようなので以下のようになりそうです。

javascript
1    var aaa = document.getElementById("aaa");
2    aaa.innerHTML = "氏名：<input type=\"text\" size=\"15\" name=\"name\">";

また、フォームの書き換えはh2タグにidを振るか、以下のようにタグの何番目のように
指定できると思いますがタグの何番目指定はのちのメンテナンスが大変なことになるため
お勧めできません…

javascript
1    var form = document.getElementById("form");
2    document.getElementsByTagName('h2')[3].innerHTML="フォーム2";

投稿2018/06/08 13:01

編集2018/06/08 13:05

sos

総合スコア38

id指定にしてよいのであれば、以下のような記述でいかがでしょうか？

<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset= "utf-8">
    <title>サンプルページ</title>

</head>

<body id = "body">
    <header id = "header">
    </header>

    <nav id="dropdown" class ="dropdown">
        <ul>
            <li><a href ="no1.html" id = "no1"></a></li>
            <li><a href ="no2.html">その２</a></li>
            <li><a href ="no3.html">その３</a></li>
        </ul>
    </nav>

    <article id="article">
    <h2 id = "contents1"></h2>
    <p id = "sentence1"></p>
    <br>
    <h2>内容２</h2>
    <p id = "paragraph1">行１
    <br>行２
    <br>行３</p>
    <br>
    <h3>内容3</h3>
    <p id = "paragraph2">行１
        <br>行２</p>
        <ul>
        <ol>
            <li>項目１</li>
            <li>項目２</li>
        </ol>
        </ul>

    <form>
    <h2>フォーム</h2>
        <div>
            <lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
            <label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
            <input type="submit" value="submit">
        </div>
    </form>

    </article>


    <footer id = "footer">
        <ul>
            <a href ="page1.html">他のページ１</a>
            <a href ="page2.html">他のページ２</a>
        </ul>
        <small id = "copyright"></small>
    </footer>

    <!-- JavaScriptでDOM指定 -->
    <script>
    var body = document.getElementById("body");
    var header = document.getElementById("header");
    var h1 = document.createElement('h1'); 
    h1.textContent = "サンプルページ";
    header.appendChild(h1);

    var nav = document.getElementById("dropdown");
    var h2 = document.createElement("h2"); 
    h2.textContent = "メニュー";
    nav.appendChild(h2);
    var no1 = document.getElementById("no1");
    no1.textContent = "その１";
    nav.appendChild(no1);

    var article = document.getElementById("article");
    var contents1 = document.createElement("contents1"); 
    contents1.textContent = "内容１";
    article.appendChild(contents1);
    var sentence1 = document.createElement("sentence1"); 
    sentence1.textContent = "文章１";
    article.appendChild(sentence1);

    var footer = document.getElementById("footer");
    var copyright = document.getElementById("copyright");
    copyright.textContent = "Copyright &copy ";
    footer.appendChild(copyright);

    </script>

</body>
</html>

直した点は以下です。
・getElementsByClassNameをgetElementByIdに変更
・aricle記述をarticleに変更
・dropdownにidを設定

投稿2018/06/08 06:38

編集2018/06/08 06:41

sos

総合スコア38

退会済みユーザー

2018/06/08 09:55

ご回答いただきましてありがとうございます。追加でお聞きしたいのですが、もしご存知でしたら教えていただけますと幸いです。以下の部分はHTMLでは<li></li>表示ですが、JavaScriptでコンテンツ指定をすると横並びに表示されてしまうという問題はどのように回避したらいいのでしょうか。 nav id="dropdown" class ="dropdown"> <ul> <li><a href ="no1.html" id = "no1"></a></li> <li><a href ="no2.html" id = "no2"></a></li> <li><a href ="no3.html">その３</a></li> </ul> </nav> var no1 = document.getElementById("no1"); no1.textContent = "その１"; nav.appendChild(no1); var no2 = document.getElementById("no2"); no2.textContent = "その2"; nav.appendChild(no2); メニューその１その2

退会済みユーザー

2018/06/08 11:23

全体のコードに関しましては。質問に追記させていただきました。何卒よろしくお願いいたします。

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

あなたの回答