JavaScript | 要素内にHTMLを追加、差し替える方法

2022-02-142022-03-03JavaScript DOM操作,JavaScript

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

HTMLを追加、差し替える

JavaScriptのinnerHTMLを使って要素内にHTMLを追加、置き換えをする動作サンプルとサンプルコードです。

See the Pen JavaScript | Replace html text by yochans (@yochans) on CodePen.

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

<div id="container"><p>PHP</p></div>

innerHTMLは指定した要素内が空の場合はHTML要素を追加、既に子要素のHTML要素がある場合は指定したHTMLに差し替えます。

サンプルでは「.container」内にあるるHTMLを置き換えています。

document.querySelector('#container').innerHTML = `<p>JavaScript</p>`;

置き換えではなく子要素の前後に追加したい場合

HTML要素の置き換えではなく、既にある子要素の前や後に追加したい場合は、insertAdjacentHTML()を利用します。

子要素の前に追加する場合は「afterbegin」を指定します。

document.querySelector('#container').insertAdjacentHTML('afterbegin', '<p>JavaScript</p>');

子要素の後に追加する場合は「beforeend」を指定します。

document.querySelector('#container').insertAdjacentHTML('beforeend', '<p>JavaScript</p>');