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

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回答

198閲覧

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/09 13:16

編集2018/06/09 14:46

前提・実現したいこと

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 &copy "; 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 &copy; </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);

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

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

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

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

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

m.ts10806

2018/06/09 13:22

タイトルと要件が離れてませんか?要件が「エラー」ではないのならタイトルも改めるべきかと。まったく同じ内容であれば幾つも質問をたてるのは少々考え物ですし。 <HTMLを書くときのエラー
guest

回答1

0

ベストアンサー

こんなかんじの関数を定義すれば、わざわざcreateElementする必要もなくJqueryみたいにDOMをつくれます(バッククオートやconst等はES6なのでIEでは動かないので注意)

javascript

1 2 3 4/** @param html {string} */ 5function elementBuilder(html) { 6 const container = document.createElement("div"); 7 container.innerHTML = html; 8 if (container.children.length !== 1) { 9 throw new Error(`親要素はひとつまで`); 10 } 11 const element = container.firstElementChild; 12 container.removeChild(element); 13 return element; 14} 15 16const element = elementBuilder(` 17 <form> 18 <h2 id = "form">フォーム</h2> 19 <div> 20 <lavel id = "nameinput"><input type="text" size="15" name="name"></lavel><br> 21 <label id = "question"><input type="text" size="20" name="question"></label><br> 22 <input type="submit" id = "button"> 23 </div> 24 </form> 25`) 26 27

投稿2018/06/09 15:04

編集2018/06/09 15:07
sagami1991

総合スコア216

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問