【JavaScript入門】要素の中身を操作するには

サンプルのJavaScriptが組み込まれた具体的なHTMLを例示して解説してください。

要素の中身を操作するには

DOM で取得した要素は “中身” を文字列として読んだり書き換えたり できます。
　最短ルートは要素が備えるプロパティを直接操作する方法で、代表的なものが innerText・innerHTML・outerHTML・value の 4 つです。ここではそれぞれの違いと使い分けを整理し、動作を確認できるミニデモを用意しました。

プロパティ	読み取り時	書き込み時	主な用途
`innerText`	画面に見えているテキストを取得（改行や CSS の影響を受ける）	テキストを書き換える。	見た目どおりの文字列が欲しいとき
`innerHTML`	要素内の HTML 文字列を取得	子要素ごと置き換える。	断片 HTML をまるごと挿入
`outerHTML`	自身を含む HTML 文字列を取得	要素ごと別の HTML に置換	タグごと丸替え
`value`	`<input>`, `<textarea>` などの入力値	値を設定	フォーム制御

１．テキストを扱うプロパティ

1.1. `innerText`

改行や隠し要素を考慮した “ユーザーが見ている文字列”
代入すればテキストノードを書き換え。

1.2. `textContent`（参考）

DOM 上のテキストをそのまま取得。CSS の表示状態は無視。
ここでは innerText を中心に解説。

2．HTML を扱うプロパティ

2.1. `innerHTML`

子要素を含む HTML 断片を返す。
代入すると 子要素をすべて破棄して 新しい DOM をパースして挿入。

2.2. `outerHTML`

その要素自身を含む HTML 文字列。
書き込み時は現在の要素を丸ごと置換。リスト項目を <span> に差し替える等で活躍。

３．フォーム値を扱う `value`

3.1. 対象要素

<input>, <textarea>, <select> などフォーム要素。
ユーザー入力を取得・初期値をセットする際に利用。

４．動作デモ ― 4 つのプロパティを一度に体験

ファイル名： content_property_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の中身を操作するには</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
ul{margin-bottom:1rem}
button{margin-right:.5rem}
textarea{width:100%;height:4rem;margin-top:.5rem}
pre{background:#f4f4f4;padding:.8rem;white-space:pre-wrap}
</style>
</head>
<body>
<h2 id="title">☕ 本日のメニュー</h2>

<ul id="menu">
  <li class="item">ホットコーヒー <span style="color:red;">売り切れ</span></li>
  <li class="item">アイスコーヒー</li>
  <li class="item">チーズケーキ</li>
  <li class="item">ホットケーキ</li>
</ul>

<button id="textBtn">innerText を取得</button>
<button id="htmlBtn">innerHTML を取得</button>
<button id="replaceBtn">outerHTML で置換</button>

<textarea id="memo" placeholder="ここに入力…"></textarea>
<button id="setMemo">value を設定</button>

<pre id="log">ログ出力:</pre>

<script>
const log = msg => document.getElementById('log').textContent = 'ログ出力:\n' + msg;

/* 1. innerText */
document.getElementById('textBtn').onclick = () => {
  const txt = document.getElementById('menu').innerText;
  log(txt);
};

/* 2. innerHTML */
document.getElementById('htmlBtn').onclick = () => {
  const html = document.getElementById('menu').innerHTML;
  log(html);
};

/* 3. outerHTML 置換 */
document.getElementById('replaceBtn').onclick = () => {
  const last = document.querySelectorAll('.item')[3];
  last.outerHTML = '<span style="color:red;">（販売終了）</span>';
  log('4 番目の <li> を <span> に置換しました');
};

/* 4. value */
document.getElementById('setMemo').onclick = () => {
  const ta = document.getElementById('memo');
  ta.value = 'おすすめ：スペシャルパフェ';
  log('textarea.value を書き換えました');
};
</script>
</body>
</html>

ブラウザの出力例

デモのポイント

ボタン	触るプロパティ	観察できること
innerText を取得	`innerText`	見た目どおりの文字列（改行含む）がログに出力
innerHTML を取得	`innerHTML`	`<li>` タグを含む HTML 断片が文字列で出力
outerHTML で置換	`outerHTML`	4 番目の `<li>` が `<span>` に丸替えされ、黒丸が消える。
value を設定	`value`	`<textarea>` の表示内容が即座に更新

プログラム解説①

　これは、「log() という関数を定義して、指定されたメッセージを HTML の要素に表示する」という命令です。

const log = msg => document.getElementById('log').textContent = 'ログ出力:\n' + msg;

💡 msg => の部分：これは「アロー関数（Arrow Function）」

これは、以下のような通常の関数の短縮形です。

const log = function(msg) {
  document.getElementById('log').textContent = 'ログ出力:\n' + msg;
};

このように、msg => ... は、1つの引数 msg を受け取って、1行の処理をする関数を作っています。

✍️ アロー関数とは？

書き方	意味
`msg => 式`	「`msg` を受け取って、その式を実行する」関数を作る。
`() => 式`	引数がない場合
`(a, b) => 式`	複数の引数がある場合
`msg => { 処理 }`	複数行の処理があるときは `{}` を使う。

プログラム解説②

　これは「textBtn というボタンがクリックされたときに、menu の中のテキストを取得して log() 関数に渡す」という処理をしています。

document.getElementById('textBtn').onclick = () => {
  const txt = document.getElementById('menu').innerText;
  log(txt);
};

💡 () => { ... } の意味：アロー関数（Arrow Function）

📌 基本構文

() => { ... }

これは JavaScript の アロー関数 という書き方で、
「引数なしの無名関数（名前のない関数）」 を作る簡潔な書き方です。

👇 同じ意味の通常の書き方

document.getElementById('textBtn').onclick = function() {
  const txt = document.getElementById('menu').innerText;
  log(txt);
};

アロー関数のほうが短く書けるという利点があります。

まとめ

テキストだけ変えたい → innerText（または textContent）
HTML 断片を挿入・取得 → innerHTML
要素ごと置換したい → outerHTML
フォーム値を読む／書く → value
書き込みは即座に DOM を変化させ、ブラウザは再描画してユーザーに反映する。

　これらのプロパティを組み合わせることで、jQuery などのライブラリを使わなくても純粋な JavaScript だけで動的コンテンツを手軽に実装できます。

【JavaScript入門】要素の中身を操作するには