参考にした動画
学んだこと
・写経したコード
・多分、一番優しいinnerHTMLの使い方。innerHTML | MDN
・多分、一番優しいcreateElement()の使い方 createElement() | MDN
・多分、一番優しいappendChild()の使い方 appendChild() | MDN
・テキストノード
・↑3つを実験したコード
・おまけ
写経したコード
<html>
<body>
<div>
<h3>メモの登録</h3>
title<input type="text" id="id-title"><br>
body<textarea id="id-body"></textarea><br>
<button id="id-add-button">メモ登録する</button>
</div>
<dir>
<h3>メモの一覧</h3>
<button>削除する</button>
<table class="table">
<thead>
<tr>
<th scope="col">-</th>
<th scope="col">タイトル</th>
<th scope="col">作成日</th>
<th scope="col">更新日</th>
<th scope="col">編集</th>
</tr>
</thead>
<tbody id="id-memo-list">
<tr>
<td><input type="checkbox"></td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td><button>編集</button></td>
</tr>
</tbody>
</table>
</dir>
</body>
<script>
let titleElement = document.getElementById("id-title")
let bodyElement = document.getElementById("id-body")
let addButton = document.getElementById("id-add-button")
addButton.addEventListener("click",(event)=>{
let title = titleElement.value
let body = bodyElement.value
// 現在時刻を表示する
let createdAt = new Date().toISOString()
// 動画の最後の時間取得のコードよくわからなかったからメモしておく
// let now = new Date()
let updatedAt = "なし"
console.log(title + body + createdAt)
// createElement()
// 引数に追加したい要素のタグを記入すると新しい要素を作成してくれる。
// 新しいtrタグを作成している。
let tr = document.createElement("tr")
tr.innerHTML = '<td><input type="checkbox"></td>' + title + '<td>' + createdAt + '</td>' + updatedAt + '<td></td><td><button>編集</button></td>'
let memoList = document.getElementById("id-memo-list")
// trタグの子要素のtrタグを追加してブラウザに表示している。
memoList.appendChild(tr)
})
</script>
</html>
ブラウザ
多分、一番優しいinnerHTMLの使い方。
・innerHTMLは、HTML要素の内容を取得や変更をするために使用されるプロパティ。
・変更されたコンテンツ(ここでは、Hello, World!)は削除されるので復元はできない。
・変更や復元をしたい場合は、変数に元のコンテンツを代入しておくか、復元したい内容で再度代入する。
<!-- innerHTMLを使って文字列が取得できるか実験 -->
<html>
<body>
<h1 id="myElement">Hello, World!</h1>
</body>
<script>
const element = document.getElementById("myElement");
// innerHTMLプロパティを使用して変更したいコンテンツを代入する。
element.innerHTML = "こんにちは、世界！";
// innerHTMLプロパティを使用してHTMLを取得
console.log(element.innerHTML);
</script>
</html>
ブラウザ
多分、一番優しいcreateElement()の使い方。
・引数に追加したい要素のタグを記入すると新しい要素を作成してくれる。
多分、一番優しいappendChild()の使い方。
・createElement()で新たに作成された要素は既存の要素の子要素として追加される。
テキストノード
・HTMLの要素内のテキストコンテンツのこと。
<div>この部分がテキストノードと呼ばれているよ</div>
↑3つを実験したコード
<!-- 実験 -->
<!-- createElement()を使って新しい要素を作る。 -->
<!-- appendChild()を使って子要素を追加してブラウザに表示させる。-->
<!--
appendChild()で追加した子要素のテキストノードを
"ディグダはダグトリオに進化するね。"という文字列にする。
-->
<html>
<body>
<div id="id-div">ディブタグってディグダに似てるね。</div>
</body>
<script>
const parentElement = document.getElementById("id-div");
const newElement = document.createElement('div');
newElement.textContent = "ディグダはダグトリオに進化するね。";
parentElement.appendChild(newElement);
</script>
</html>
ブラウザ
おまけ
appendChild()があるならappendParent()があるのかと思って
appendParent() mdnで調べたら検索されなかった。
そもそもhtmlで親要素を作って、jsで追加できるのは子要素なのでは？と思って今は納得している。