【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

JavaScriptを使って任意のhtmlタグを取得し、値を出力したい。
もしくは値を上書き(書き換え)したい。
本記事ではJavaScriptのtextContentプロパティを使ってこのような悩みを解決します。
htmlタグを取得し出力・書き換えるコード
// htmlを取得
var txt = document.getElementById("txt");
// 値を出力・書き換える
txt.textContent = "出力・書き換える文字列";
htmlタグを取得し出力・書き換えるコードです。
取得にはdocument.getElementByIdメソッドを使いましょう。
取得したいhtmlタグに任意のIDを付与してgetElementByIdメソッドの引数にそのID名を入れるだけでOKです。
取得したhtmlタグの値を出力・書き換えるにはtextContentプロパティを使います。
以下のように取得したhtmlタグの変数とtextContentプロパティをドットで繋げ、値に出力したい文字列を入力すればOKです。
取得したhtmlタグの変数.textContent = "出力・書き換える文字列";
書き換えたい場合も同様の方法で行えば上書きできます。
以上の手順で実装できます。
まとめ
JavaScriptで任意のイベントを実行した時にhtmlタグ内の値を書き換える事例があるかと思います。
その際、textContentプロパティを使えば簡単に出力・上書き可能です。
ぜひ参考にしてみてください。
以上で解説を終わります。
目次