JavaScriptを使って1度表示されたHTMLタグの内容を変更する（書き換える）ことが出来ます。
Webアプリ制作の第1歩と考えていいと思います。
ホームページを書き換えるポイント
ポイントは次の2点です。
1.HTMLタグにidをつけて場所を特定できるようにする
2.document.getElementById(“ID名”).innerHTMLを使ってホームページの内容を書き換える
簡単な例で示します。
次のサンプルでは、ボタンを押すと最初に表示されていたメッセージが変化します。
ソースコード
changeText1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページを書き換える1</title>
<script>
function changeText(){
document.getElementById("target").innerHTML = "おっす。おら悟空！";
}
</script>
</head>
<body>
<h1>ホームページを書き換える1</h1>
<p>
<input type="button" value="押してね！" onclick="changeText()">
</p>
<p id="target">ぼく太郎！</p>
</body>
</html>
解説
まずは、HTML部分の書き換えたい箇所にidを付けます。
今回は、pタグの「ぼく太郎！」の部分にidを付けました。
<p id="target">ぼく太郎！</p>
今回は段落のpタグですが、IDをつけるタグは、見出しタグ（h1~h6）やspanタグなど文字列が入っているタグならなんでもOKです。
ボタンを押した時のイベントで関数changeTextを呼び出しています。
<input type="button" value="押してね！" onclick="changeText()">
書き換える処理は、document.getElementByIdという非常に長い命令を使います。（ちなみにE（イー）とB（ビー）とI（アイ）は英大文字です。よく間違えるので注意して下さい！）
JavaScriptの世界では、通常こうしてドキュメントに直接アクセスすることをDOM（Document Object Model）という言葉を用いて説明されています。DOMについて詳しく知りたい方は以下をご覧下さい。
DOMは、簡単に言うとWebページに表示されているものをオブジェクト（アクセスできる単位）として扱う考え方です。（簡単じゃないですね！笑）
話がそれました。
実際に書き換えを行っている部分です。（関数changeTextの中身）
document.getElementById("target").innerHTML = "おっす。おら悟空！";
document.getElement(“ID名”)の後ろには「.」（ピリオド）で繋げて沢山の命令が存在しますが、今回はHTMLを書き換える命令（メソッドと呼びます）innerHTMLを使っています。変数のa = 10;のような感覚で右側のダブルクォーテーションでくくった文字列がidで指定したタグの中身となります。
今回の例ででは、
<p id="target">ぼく太郎！</p>
が、ボタンをクリックすると
<p id="target">おっす。おら悟空！</p>
に置き換わることになります。
テキストボックスに入力した文字列を取得する
もう少し、アプリっぽくしてみます。
テキストボックスに入力された文字列を取得してサイトに表示（書き換え）させてみます。
ソースコード
changeText2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページを書き換える2</title>
<script>
function changeText(){
// テキストボックスの文字を取得
let moji = document.getElementById("moji").value;
// 入力した文字を表示する
document.getElementById("target").innerHTML = moji + "が入力されたよ！";
}
</script>
</head>
<body>
<h1>ホームページを書き換える2</h1>
<p>
<input id="moji" type="text" size="30" placeholder="ここに文字を入力してください">
<input type="button" value="押してね！" onclick="changeText()">
</p>
<p id="target">???</p>
</body>
</html>
解説
テキストボックスの値を取得したいので、inputタグにidを付けています。
<input id="moji" type="text" size="30" placeholder="ここに文字を入力してください">
上記inputタグで利用しているplaceholder属性は、何も表示されていない場合ちょとと薄く表示される文字です。（テキストボックスに何か入力されると消える）何を入力するかサンプル文字列などを示すと分かりやすいアプリが作成できると思います。
スマホなど画面の狭い端末で入力を促すときには重宝する機能です。
次にテキストボックスの値を取得する部分です。
idをつけたタグの内容を取得するにはvalueプロパティを使います。
今回はvalueプロパティでテキストボックスの文字列を取得して変数mojiに代入しています。
// テキストボックスの文字を取得
let moji = document.getElementById("moji").value;
ちなみにテキストボックスに限らずどんなタグでもこのvalueプロパティでIDをつけたタグの中身を取得できます。便利ですね！
最後にinnerHTMLを使って指定したIDの場所（今回はid=targetの場所）に文字列を代入して最初の文字列「???」を変化させています。
以下のように＋演算子を使うと文字列同士の連結が出来ます。今回は、変数の値（文字列）と定数文字列「が入力されたよ！」とを連結しています。
// 入力した文字を表示する
document.getElementById("target").innerHTML = moji + "が入力されたよ！";
以上、JavaScriptでホームページを書き換えるでした。
コメント