diff --git a/src/pages/js/060-edit-html-from-js.mdx b/src/pages/js/060-edit-html-from-js.mdx
new file mode 100644
index 0000000..6995a88
--- /dev/null
+++ b/src/pages/js/060-edit-html-from-js.mdx
@@ -0,0 +1,129 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import RenderFile from "@/components/RenderFile";
+import RenderHtml from "@/components/RenderHtml";
+
+export const title = "JavaScriptでHTMLを操作する";
+
+# {title}
+
+## TOC
+
+HTML要素を取得して、イベントを設定するところまで学習しました。  
+しかし、これだけでは「ボタンを押したらアラートが出る」くらいのことしかできません。
+
+もっとWebページらしく、動的に画面の表示が変わるようにしてみましょう！
+
+<br />
+
+## HTMLの中身を書き換える
+
+まずは、画面に表示されている文字を書き換えてみましょう。
+
+```html file=src/sample/js/edit-content.html
+src/sample/js/edit-content.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/edit-content.html" />
+
+<br />
+
+ボタンを押すと、`こんにちは！`が`こんばんは！`に変わりましたね。
+
+コードを見てみましょう。
+
+```html file=src/sample/js/edit-content.html {9}
+src/sample/js/edit-content.html
+内容を取得できませんでした
+```
+
+重要なのは `text.textContent = "こんばんは！"` の部分です。  
+取得した要素の `textContent` というプロパティに、新しい文字列を代入することで、表示されている文字を書き換えることができます。
+
+### innerHTML
+
+文字だけでなく、HTMLタグも含めて書き換えたい場合は `innerHTML` を使います。
+
+```js
+// 太文字になる
+element.innerHTML = "<b>こんばんは！</b>";
+```
+
+ただし、`innerHTML` はセキュリティ上のリスク（XSSなど）があるため、単に文字を書き換えるだけであれば `textContent` を使うのが基本です。
+
+<br />
+
+## スタイルを変更する
+
+次は、JavaScriptからCSSを操作して、色や大きさを変えてみましょう。
+
+```html file=src/sample/js/change-style.html
+src/sample/js/change-style.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/change-style.html" />
+
+<br />
+
+ボタンを押すと文字が赤くなり、太字になりました。
+
+```html file=src/sample/js/change-style.html {9-10}
+src/sample/js/change-style.html
+内容を取得できませんでした
+```
+
+`text.style.color = "red"` のように、要素の `style` プロパティを通じてCSSを操作できます。
+
+注意点として、CSSのプロパティ名が少し変化します。  
+CSSでは `font-weight` のようにハイフン区切り（ケバブケース）ですが、JavaScriptでは `fontWeight` のようにcamelCase（キャメルケース）になります。
+
+- `background-color` → `backgroundColor`
+- `font-size` → `fontSize`
+- `margin-top` → `marginTop`
+
+<br />
+
+## クラスを操作する
+
+スタイルを直接 `style` で書き換えるのも良いですが、変化させたいスタイルが多いと大変です。  
+あらかじめCSSでクラスを用意しておき、JavaScriptでそのクラスをつけ外しする方が一般的です。
+
+```html file=src/sample/js/toggle-class.html
+src/sample/js/toggle-class.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/toggle-class.html" />
+
+<br />
+
+`classList` という機能を使うと、クラスの追加や削除が簡単にできます。
+
+```html file=src/sample/js/toggle-class.html {17}
+src/sample/js/toggle-class.html
+内容を取得できませんでした
+```
+
+`classList` には以下のようなメソッドがあります。
+
+- `add("クラス名")`: クラスを追加する
+- `remove("クラス名")`: クラスを削除する
+- `toggle("クラス名")`: クラスがあれば削除し、なければ追加する
+
+今回の例では `toggle` を使っているので、ボタンを押すたびに背景色がついたり消えたりしています。
+
+<br />
+
+## まとめ
+
+JavaScriptを使ってHTMLを操作する基本的な方法を見てきました。
+
+1. `textContent` で文字を書き換える
+2. `style` で見た目を直接変える
+3. `classList` でクラスを付け外しして見た目を変える
+
+これらを組み合わせることで、ユーザーの操作に合わせて動的に変化するWebページを作ることができます。
diff --git a/src/sample/js/change-style.html b/src/sample/js/change-style.html
new file mode 100644
index 0000000..bb9711b
--- /dev/null
+++ b/src/sample/js/change-style.html
@@ -0,0 +1,12 @@
+<p id="text">文字の色が変わります</p>
+<button id="btn">赤にする</button>
+
+<script>
+  const text = document.querySelector("#text");
+  const btn = document.querySelector("#btn");
+
+  btn.addEventListener("click", () => {
+    text.style.color = "red";
+    text.style.fontWeight = "bold";
+  });
+</script>
diff --git a/src/sample/js/edit-content.html b/src/sample/js/edit-content.html
new file mode 100644
index 0000000..0b76d34
--- /dev/null
+++ b/src/sample/js/edit-content.html
@@ -0,0 +1,11 @@
+<p id="text">こんにちは！</p>
+<button id="btn">変更</button>
+
+<script>
+  const text = document.querySelector("#text");
+  const btn = document.querySelector("#btn");
+
+  btn.addEventListener("click", () => {
+    text.textContent = "こんばんは！";
+  });
+</script>
diff --git a/src/sample/js/toggle-class.html b/src/sample/js/toggle-class.html
new file mode 100644
index 0000000..ed00d80
--- /dev/null
+++ b/src/sample/js/toggle-class.html
@@ -0,0 +1,19 @@
+<style>
+  .highlight {
+    background-color: yellow;
+    font-weight: bold;
+    padding: 10px;
+  }
+</style>
+
+<p id="text">背景色がついたり消えたりします</p>
+<button id="btn">切り替え</button>
+
+<script>
+  const text = document.querySelector("#text");
+  const btn = document.querySelector("#btn");
+
+  btn.addEventListener("click", () => {
+    text.classList.toggle("highlight");
+  });
+</script>