innerHTMLで要素を変える
innerHTMLとtextContentの違い
JavaScript初心者が最初に直面するDOM操作の基本は、要素の内容を取得・変更する方法です。innerHTMLはタグを含むHTML文字列を返し、textContentは純粋なテキストのみを返します。例えば、<div><span>Hello</span> World</div>という構造に対して、innerHTMLは<span>Hello</span> Worldを返し、textContentはHello Worldを返します。innerHTMLを使うと、HTML構造をそのまま書き換えることができるため、動的変更が必要な場合に便利です。一方、textContentは安全性が高く、XSS攻撃のリスクが低い点がメリットです。
要素変更とテキスト変更の実践
DOM操作でよく使われるパターンは、document.querySelectorで要素を取得し、innerHTMLやtextContentで書き換えることです。以下の例では、ボタンをクリックするとテキストが動的に変更されます。
const btn = document.querySelector('#changeBtn');
const target = document.querySelector('#target');
btn.addEventListener('click', () => {
target.textContent = 'テキスト変更が完了しました！';
});このように、textContentを使うことで、要素内のテキストだけを安全に更新できます。もしHTMLタグを含めて書き換えたい場合は、innerHTMLを使用します。
HTML変更と書き換えで表示更新を動的に行う
動的変更を行う際は、innerHTMLを使って複数の要素を一括で書き換えることができます。例えば、以下のコードはリストを再生成し、表示を更新します。
const list = document.querySelector('#list');
const items = ['Apple', 'Banana', 'Cherry'];
list.innerHTML = items.map(item => `${item} `).join('');この手法は、要素変更とテキスト変更を組み合わせて、HTML変更を効率的に行う際に有効です。さらに、document.createElementやappendChildを併用すれば、より細かい制御が可能になります。
コメント
コメントを投稿