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でテキストを置き換えた場合と同じ結果になります。