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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1807閲覧

JavaScriptのdocumentオブジェクトを用いてHTMLを書くときのエラー②

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/06/08 23:05

前提・実現したいこと

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

前回の質問の進捗に伴い、発生した問題について質問させていただきます。
前回の質問

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

<article>タグの部分でHTMLでは改行とリストを用いて箇条書きにしていた部分が
JavaScriptで書くと崩れてしまっています。

JavaScript

1var article = document.getElementById("article"); 2 var contents1 = document.createElement("contents1"); 3 contents1.textContent = "内容1"; 4 article.appendChild(contents1) 5 var sentence1 = document.createElement("sentence1"); 6 sentence1.textContent = "文章1"; 7 article.appendChild(sentence1); 8 var contents2 = document.createElement("contents2"); 9 contents2.textContent = "内容2"; 10 article.appendChild(contents2) 11 var paragraph1 = document.createElement("paragraph1"); 12 paragraph1.textContent = "行1_1"; 13 article.appendChild(paragraph1); 14 var contents3 = document.createElement("contents3"); 15 contents3.textContent = "内容3"; 16 article.appendChild(contents3) 17 var paragraph2 = document.createElement("paragraph2"); 18 paragraph2.textContent = "行2_1"; 19 article.appendChild(paragraph2); 20 var list1 = document.createElement("list1"); 21 list1.textContent = "項目1"; 22 article.appendChild(list1); 23 var list2 = document.createElement("list2"); 24 list2.textContent = "項目2"; 25 article.appendChild(list2);

内容1文章1内容2行1_1内容3行2_1項目1項目2

②フォーム部分も同様に、検索窓はinnerHTMLで作成する必要があるかと思いますが、
改行は元のHTMlと同じ様に表したいです。

JavaScript

1var form = document.getElementById("form"); 2 form.textContent = "フォーム"; 3 article.appendChild(form); 4 var nameinput = document.getElementById("nameinput"); 5 nameinput.textContent = "氏名:"; 6 article.appendChild(nameinput); 7 var question = document.getElementById("question"); 8 question.textContent = "問い合わせ内容:"; 9 article.appendChild(question); 10 var button = document.getElementById("button"); 11 button.textContent = "submit"; 12 article.appendChild(button);

フォーム
氏名:問い合わせ内容:

該当のソースコード

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 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" id = "no3"></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 id = "contents2"></h2> 26 <p id = "paragraph1"> 27 <br>行1_2 28 <br>行1_3</p> 29 <br> 30 <h3 id = "contenst3"></h3> 31 <p id = "paragraph2"> 32 <br>行2_2</p> 33 <ul> 34 <ol> 35 <li id = "list1"></li> 36 <li id = "list2"></li> 37 </ol> 38 </ul> 39 40 <form> 41 <h2 id = "form">フォーム</h2> 42 <div> 43 <lavel id = "nameinput"><input type="text" size="15" name="name"></lavel><br> 44 <label id = "question"><input type="text" size="20" name="question"></label><br> 45 <input type="submit" id = "button"> 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.insertBefore(h2, nav.firstChild); 72 var no1 = document.getElementById("no1"); 73 no1.textContent = "その1"; 74 var no2 = document.getElementById("no2"); 75 no2.textContent = "その2"; 76 var no3 = document.getElementById("no3"); 77 no3.textContent = "その3"; 78 79 80 var article = document.getElementById("article"); 81 var contents1 = document.createElement("contents1"); 82 contents1.textContent = "内容1"; 83 article.appendChild(contents1) 84 var sentence1 = document.createElement("sentence1"); 85 sentence1.textContent = "文章1"; 86 article.appendChild(sentence1); 87 var contents2 = document.createElement("contents2"); 88 contents2.textContent = "内容2"; 89 article.appendChild(contents2) 90 var paragraph1 = document.createElement("paragraph1"); 91 paragraph1.textContent = "行1_1"; 92 article.appendChild(paragraph1); 93 var contents3 = document.createElement("contents3"); 94 contents3.textContent = "内容3"; 95 article.appendChild(contents3) 96 var paragraph2 = document.createElement("paragraph2"); 97 paragraph2.textContent = "行2_1"; 98 article.appendChild(paragraph2); 99 var list1 = document.createElement("list1"); 100 list1.textContent = "項目1"; 101 article.appendChild(list1); 102 var list2 = document.createElement("list2"); 103 list2.textContent = "項目2"; 104 article.appendChild(list2); 105 106 var form = document.getElementById("form"); 107 form.textContent = "フォーム"; 108 article.appendChild(form); 109 var nameinput = document.getElementById("nameinput"); 110 nameinput.textContent = "氏名:"; 111 article.appendChild(nameinput); 112 var question = document.getElementById("question"); 113 question.textContent = "問い合わせ内容:"; 114 article.appendChild(question); 115 var button = document.getElementById("button"); 116 button.textContent = "submit"; 117 article.appendChild(button); 118 119 120 var footer = document.getElementById("footer"); 121 var other1 = document.getElementById("other1"); 122 other1.textContent = "他のページ1"; 123 var other2 = document.getElementById("other2"); 124 other2.textContent = "他のページ2"; 125 var copyright = document.getElementById("copyright"); 126 copyright.textContent = "Copyright &copy "; 127 128 </script> 129 130</body> 131</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">その1</a></li> 19 <li><a href ="no2.html">その2</a></li> 20 <li><a href ="no3.html">その3</a></li> 21 </ul> 22 </nav> 23 24 <!-- main content --> 25 <article> 26 <h2>内容1</h2> 27 <p>文章1</p> 28 <br> 29 <h2>内容2</h2> 30 <p id = "paragraph1">行1 31 <br>行2 32 <br>行3</p> 33 <br> 34 <h3>内容3</h3> 35 <p id = "paragraph2">行1 36 <br>行2</p> 37 <ul> 38 <ol> 39 <li>項目1</li> 40 <li>項目2</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">他のページ1</a> 59 <a href ="page2.html">他のページ2</a> 60 </ul> 61 <small>Copyright &copy; </small> 62 </footer> 63 64</body> 65</html>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

崩れている下人はjavascriptで作成した要素のタグ名がhtmlのそれと異なるためです。
html側には contents1sentence1 といったタグ名の要素は存在していませんが、javascriptではそういった要素を作成しています。
元々の元々のhtmlファイルと同じタグを使うようにしてください。

javascript

1 var article = document.getElementById("article"); 2 var contents1 = document.createElement("h1"); 3 contents1.textContent = "内容1"; 4 article.appendChild(contents1) 5 var sentence1 = document.createElement("p"); 6 sentence1.textContent = "文章1"; 7 article.appendChild(sentence1); 8 var contents2 = document.createElement("h2"); 9 contents2.textContent = "内容2"; 10 article.appendChild(contents2) 11 var paragraph1 = document.createElement("p1"); 12 paragraph1.textContent = "行1_1"; 13 article.appendChild(paragraph1); 14 var contents3 = document.createElement("h3"); 15 contents3.textContent = "内容3"; 16 article.appendChild(contents3) 17 var paragraph2 = document.createElement("p"); 18 paragraph2.textContent = "行2_1"; 19 article.appendChild(paragraph2); 20 21 var ul = document.createElement("ol"); 22 article.appendChild(ul); 23 24 var list1 = document.createElement("li"); 25 list1.textContent = "項目1"; 26 ul.appendChild(list1); 27 var list2 = document.createElement("li"); 28 list2.textContent = "項目2"; 29 ul.appendChild(list2);

投稿2018/06/08 23:49

ku__ra__ge

総合スコア4524

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/09 11:06

ご回答いただきましてありがとうございます。 ちなみにformの部分は何が問題なのでしょうか。
退会済みユーザー

退会済みユーザー

2018/06/09 11:09

こちらのご回答を受けて var form = document.getElementById("form"); form.textContent = "フォーム"; article.appendChild(form); var div = document.getElementById("div"); article.appendChild(div); var nameinput = document.createElement("lavel"); nameinput.textContent = "氏名:"; div.appendChild(nameinput); var question = document.createElement("lavel"); question.textContent = "問い合わせ内容:"; div.appendChild(question); var button = document.getElementById("button"); button.textContent = "submit"; article.appendChild(button); の様に修正しましたが、表示は壊れたままです。
退会済みユーザー

退会済みユーザー

2018/06/09 11:14

お手数おかけしますが、ご回答のほどよろしくお願いいたします。
ku__ra__ge

2018/06/12 06:56

そのコードでなにがやりたいのか読み取れません。 あなたは「既に存在する要素に文字を設定したい」のですか? それとも「新たに要素を作成してそれを既存の要素の子として追加したい」のですか? 適当にそれっぽいコードを書くのではなく、1行1行が何をやっているか意味を確認して自分の書いたコードが動くはずである理由を説明できるようになってください。 とりあえずフォームの要素を全部生成するなら以下のようなコードでできます。 var form = document.createElement("form"); article.appendChild(form); var h2 = document.createElement("h2"); h2.textContent = "フォーム"; form.appendChild(h2); var div = document.createElement("div"); form.appendChild(div); var nameinput = document.createElement("lavel"); nameinput.textContent = "氏名:"; div.appendChild(nameinput); div.appendChild(document.createElement("br")); var question = document.createElement("lavel"); question.textContent = "問い合わせ内容:"; div.appendChild(question); div.appendChild(document.createElement("br")); var button = document.getElementById("button"); button.textContent = "submit"; div.appendChild(button);
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問