こちらの記事では、JavaScriptでHTMLのテキストを取得・設定する方法についてサンプルコードを用いて分かりやすく解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
テキストを取得・設定する2つのプロパティ
JavaScriptで、HTMLのテキストを取得・設定したい場合は「textContent」「innerHTML」2つのプロパティが使われます。
2つの違いは、テキストを設定する時にあります。textContentは設定した文字列をそのまま表示させるのに対して、innerHTMLは設定した文字列はそのまま表示させるのではなくHTMLとして表示させます。
つまり、textContentでタグも含めた文字列を設定しても、そのタグはHTMLとしてではなく文字列として表示されてしまいます。タグを含めたテキストを設定したい場合はinnerHTMLを使いましょう。
HTMLのテキストを取得する方法
textContentとinnerHTMLを使ってHTMLのテキスト情報を取得する方法は以下のとおりです。
<p id="sample-text">サンプルテキスト</p>
<script>
window.addEventListener('DOMContentLoaded', () => {
const sampleText = document.getElementById('sample-text'); ①
/*** ▼② textContent ***/
console.log(sampleText.textContent); // サンプルテキスト
/*** ▼③ innerHTML ***/
console.log(sampleText.innerHTML); // サンプルテキスト
});
</script>- 取得したいテキスト情報がある要素を変数sampleTextに代入します。
- sampleText.textContentでテキスト情報を取得することができます。
- sampleText.innerHTMLでテキスト情報を取得することができます。
HTMLのテキストを設定する方法
textContentとinnerHTMLを使ってHTMLのテキスト情報を設定する方法は以下のとおりです。
<p id="sample">変更前のテキスト</p>
<script>
const sample = document.getElementById('sample');
sample.textContent = "変更後のテキスト";
sample.innerHTML = "変更後のテキスト";
</script>まず始めに文字を設定したい対象の要素を取得し、変数に代入します。
textContentで文字を設定する場合は「変数.textContent = “設定した文字列”」、innerHTMLで文字を設定する場合は「変数.innerHTML = “設定したい文字列”」の記述をします。
サンプルコード
こちらで紹介するサンプルコードは、フォームに文字を入力しボタンをクリックすると入力する文字が表示されます。
<input id="input" placeholder=”文字を入力してください”></input>
<button id="btn">文字を入力後にクリック</button>
<p>入力された値は「<span id="output"></span>」です</p>
<script>
function outputBtn(){
output.textContent = input.value; // ⑤
output.innerHTML = input.value; // ⑥
}
window.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('input'); // ①
const output = document.getElementById('output'); // ②
const btn = document.getElementById('btn'); // ③
btn.addEventListener('click',outputBtn,false); // ④
});
</script>- 入力フォームの要素を変数inputに代入します。
- 入力した文字を表示させる要素を変数outputに代入します。
- クリックイベントを設定したい要素を変数btnに代入します。
- btnにクリックイベントを設定し、イベント発火後に関数outputBtnを実行するように設定します。
- output.textContent = input.valueで入力された文字列を表示させます。
- output.innerHTML = input.valueで入力された文字列を表示させます。
豆知識
文字列をHTMLとして表示させるinnerHTMLは、既存の要素を全て新しいものに書き換えてしまうことや、代入による直接的な操作をしているため処理速度が遅いです。
要素の内容を置き換える場合は、innerHTMLを使っても問題ないですがHTMLを追加する場合は、insertAdjacentHTMLメソッドを使うことが推奨されています。
