JavaScript | HTMLのテキストを差し替える方法

JavaScript | HTMLで表示しているテキストを差し替える方法を紹介しています。

テキストを差し替える

JavaScriptのtextContentを使ってHTMLのテキストを差し替える動作サンプルとサンプルコードです。

See the Pen JavaScript | Delete data attributes by yochans (@yochans) on CodePen.

サンプルコードではHTMLに「.text」とid名を指定した<p>タグを設置しています。

<p id="text">PHP</p>

textContentは指定した要素内のテキストを差し替える事が可能です。

サンプルでは「PHP」から「JavaScript」へテキストを置き換えています。

document.querySelector('#text').textContent = `JavaScript`;

HTMLコードを含める場合

textContentでHTMLコードを指定した場合、ブラウザはHTMLコードを解釈しません。

HTMLを含めたテキストに置き換えたい場合はinnerHTMLを利用します。

document.querySelector('#text').textContent = `<span>JavaScript</span>`;
// <span>もそのままテキストとして表示される

document.querySelector('#text').innerHTML = `<span>JavaScript</span>`;
// <span>はHTMLとして表示される

また、innerHTMLにHTMLが含まれていないテキストを指定した場合は、textContentでテキストを置き換えた場合と同じ結果になります。