Webページ上でメモを記録したい

前提・実現したいこと

Webページ上でメモを記録したいです。

しかしページをリロードしたら全て消えるもので、実用的なものである必要はなく、
フォームから入力した入力内容がブラウザ画面に反映されれば良いです。
追記：ローカルに保存なども必要なく、以下の形が再現することが目的です。

このような形です。
（「新しいメモ」→「次のメモ」の順に入力して投稿ボタンをクリックした状態）

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

上記した条件を踏まえて現在このような状態です

投稿ボタンをクリックするたびに毎回クラスを付与することで実現できるかと思い、
jsコード最後2行を記述していますが、インスペクターを見ると毎回子要素(?)になっています。

該当のソースコード

html
1
2<body>
3  <div class="title">
4    <h1>メモが追加できます</h1>
5  </div>
6  <form>
7    <textarea id="textarea" rows="4" cols="40" placeholder="次のメモ"></textarea>
8    <button type="button" onclick="textcopy()">投稿</button>
9    <hr>
10    <div id="insert">
11    </div>
12  </form>
13</body>

javascript
1function textcopy() {
2  // テキストエリアの内容を取得
3  var textarea = document.getElementById("textarea").value;
4  // テキストエリアの内容を消去
5  document.getElementById("textarea").value = "";
6  // これまでに追加されたテキストとの連結を行う
7  textarea = document.getElementById("insert").innerHTML + textarea;
8  // "insert"のidが指定されたの要素の中に挿入
9  document.getElementById("insert").innerHTML = "<div>" + textarea + "</div>";
10  let target = document.getElementById("insert")
11  target.classList.add("memo");
12}

css
1.memo {
2  padding: 0.5em 1em;
3  margin: 2em 0;
4  /*文字色*/
5  background: #FFF;
6  border: solid 4px rgb(244,212,155);
7  /*線*/
8  border-radius: 7px;
9  /*角の丸み*/
10}
11

試したこと

いろいろ調べた結果、
JavaScriptの中でidやclassといった属性を指定するには
element.setAttribute
を使用するのかと考えたのですが、MDNのリファレンスや他サイトを見てもよくわからず混乱しております。

どこが間違っているのかてんでわかりません。。。。
稚拙な質問をご容赦ください。

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

回答3件

こんにちは。自己解決お疲れ様です!!

ダブルクオートの件ですが、おっしゃる通り"内で"を使用することはできません。
代替案としては、以下2つが考えられます。

1)"の中では'を使用する。

javascript
1const textarea = "<div class='memo'>"

2)エスケープする。

javascript
1const textarea = "<div class=\"memo\">"

いずれの方法も下記のページで紹介されていましたので、覗いてみてもよいかもしれません^^
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings

また余談になり恐縮ですが、innerHTMLなどでHTMLタグを動的に生成する場合は、セキュリティ的に問題を引き起こす可能性があるため、使用には注意が必要です。

個人レベルの使用であれば大きな問題になることは少ないとは思いますが、もし機会があれば、DOM-based XSSといった単語を検索してみるとよいかもしれません。

投稿2020/06/25 17:34

whasse

総合スコア28

Alex_M

2020/06/25 17:43

回答ありがとうございます！リンク先の方参照いたします。セキュリティ的に問題がある可能性があるとは知りませんでした。そこも調べてみます！

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

自己解決

解決いたしましたので、もし同じようなところでつまづいた方の目についたら幸いです。
以下解決方法
（まだまだ勉強したてのひよっこ知識ですので、用語や説明が間違っている場合があるかと思います。
その際お気づきになりましたら、どうかご指摘お願いします。）

javascript
1//修正前
2function textcopy() {
3  // テキストエリアの内容を取得
4  var textarea = document.getElementById("textarea").value;
5  // テキストエリアの内容を消去
6  document.getElementById("textarea").value = "";
7  // これまでに追加されたテキストとの連結を行う
8  textarea = document.getElementById("insert").innerHTML + textarea;
9  // "insert"のidが指定されたの要素の中に挿入
10  document.getElementById("insert").innerHTML = "<div>" + textarea + "</div>";
11  let target = document.getElementById("insert")
12  target.classList.add("memo");
13}

「質問」の方に掲載した↑のコードでは、
"変数textarea"に投稿ボタンをクリックするたびに"変数target"の取得した"ID insert"が取得され、その中にどんどんdiv要素を追加していってしまっていました。（インスペクターを見ると大変なことに・・・）

そこで

javascript
1//修正後
2function textcopy() {
3  // テキストエリアの内容を取得
4  var textarea = document.getElementById("textarea").value;
5  // テキストエリアの内容を消去
6  document.getElementById("textarea").value = "";
7  // これまでに追加されたテキストとの連結を行う
8  let memo = "memo";
9  textarea = "<div>" + "<p class=" + memo + ">" + textarea + "</p>" + "</div>" + document.getElementById("insert").innerHTML;
10  // "insert"のidが指定されたの要素の中に挿入
11  document.getElementById("insert").innerHTML = textarea;
12}

このように直しました。

これであれば、

html
1<div>
2 <p class="~">~~~~</p>
3</div>
4
5<div>
6 <p class="~">~~~~</p>
7</div>
8・
9・
10・
11・

という形で任意のクラスを同じ親要素に子要素として追加していけました。

ただ私自身もよくわかっていない点があり、
修正後の最後3行、

js
1let memo = "memo";
2textarea = "<div>" + "<p class=" + memo + ">" + textarea + "</p>" + "</div>" + document.getElementById("insert").innerHTML;
3// "insert"のidが指定されたの要素の中に挿入
4document.getElementById("insert").innerHTML = textarea;

ここの部分ですが、textareaを子要素として追加する際、"<div class="~">"と記述できないため、memo="memo"と記述し"<div class=" + memo + ">" と記述しました。
これは純粋に" "内に""を使えないからなのか文法上のルールなのかは不明です。。
わかる方がいましたらどうかご教授ください。。。

以上長くなりましたが、同じようなことで悩んでいた方の参考になれば幸いです。

投稿2020/06/25 16:11

編集2020/06/25 16:14

Alex_M

総合スコア32