前提・実現したいこと
JavaScriptのdocumentオブジェクトを用いてHTMLを書いています。
元々のHTMLファイルと同じ表示をJavaScriptのdocumentオブジェクトで表したいです。
具体的には以下のサイトに近いと思いますが、イベントなどは起こさずに、
HTMLの中身をJavaScriptで設定しようとしているだけです。
参考サイト
前回の質問の進捗に伴い、発生した問題について質問させていただきます。
前回の質問
発生している問題・エラーメッセージ
以下、<form></form>部分のJavaScriptですが、
元々のHTMLの構造とは大きく離れてしまっています。
どの様に修正すれば良いか教えていただきたいです。
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);
該当のソースコード
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><input type="text" size="15" name="name"></lavel><br> 44 <label><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("h1"); 82 contents1.textContent = "内容1"; 83 article.appendChild(contents1) 84 var sentence1 = document.createElement("p"); 85 sentence1.textContent = "文章1"; 86 article.appendChild(sentence1); 87 var contents2 = document.createElement("h2"); 88 contents2.textContent = "内容2"; 89 article.appendChild(contents2) 90 var paragraph1 = document.createElement("p1"); 91 paragraph1.textContent = "行1_1"; 92 article.appendChild(paragraph1); 93 var contents3 = document.createElement("h3"); 94 contents3.textContent = "内容3"; 95 article.appendChild(contents3) 96 var paragraph2 = document.createElement("p"); 97 paragraph2.textContent = "行2_1"; 98 article.appendChild(paragraph2); 99 100 var ul = document.createElement("ol"); 101 article.appendChild(ul); 102 103 var list1 = document.createElement("li"); 104 list1.textContent = "項目1"; 105 ul.appendChild(list1); 106 var list2 = document.createElement("li"); 107 list2.textContent = "項目2"; 108 ul.appendChild(list2); 109 110 111 var form = document.getElementById("form"); 112 form.textContent = "フォーム"; 113 article.appendChild(form); 114 var div = document.getElementById("div"); 115 article.appendChild(div); 116 var nameinput = document.createElement("lavel"); 117 nameinput.textContent = "氏名:"; 118 div.appendChild(nameinput); 119 var question = document.createElement("lavel"); 120 question.textContent = "問い合わせ内容:"; 121 div.appendChild(question); 122 var button = document.getElementById("button"); 123 button.textContent = "submit"; 124 article.appendChild(button); 125 126 127 var footer = document.getElementById("footer"); 128 var other1 = document.getElementById("other1"); 129 other1.textContent = "他のページ1"; 130 var other2 = document.getElementById("other2"); 131 other2.textContent = "他のページ2"; 132 var copyright = document.getElementById("copyright"); 133 copyright.textContent = "Copyright © "; 134 135 </script> 136 137</body> 138</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 © </small> 62 </footer> 63 64</body> 65</html>
試したこと
前回の質問前は以下の様に書いておりましたが、
今回修正を加えても
<form> <h2 id = "form">フォーム</h2> <div> <lavel id = "nameinput"><input type="text" size="15" name="name"></lavel><br> <label id = "question"><input type="text" size="20" name="question"></label><br> <input type="submit" id = "button"> </div> </form>
検索窓部分と検索窓の説明部分が分離してしまい、
どの部分が分離する原因になっているのかがわかりません。
JavaScript
1 var 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);
回答1件
あなたの回答
tips
プレビュー