【簡単】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プロパティを使えば簡単に出力・上書き可能です。

ぜひ参考にしてみてください。

以上で解説を終わります。

Ads

関連記事

HTMLCSS プログラミング

CSSで背景画像を右からを基準にpx指定する方法

2020.07.13
133
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
85
HTMLCSS プログラミング

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

2022.03.13
1210
プログラミング

ベーシック認証。サイトへのログインにパスワードをかけよう【簡単便利】

更新日:2020.06.12
82