【JavaScript】innerHTMLで要素内のマークアップを書き換える

こんにちは、Ryohei（@ityryohei）です！

JavaScriptで要素内のマークアップ（HTMLのタグ）を書き換える方法になります。innerHTMLというプロパティを使って要素内のアークアップを書き換える方法をご紹介しています。

本記事の内容

• innerHTMLを理解する
• 要素内のマークアップを取得してみる
• 要素内のマークアップを書き換えてみる

では解説していきます。

innerHTMLとは

innerHTMLは、特定の要素内にあるHTMLやXMLといったマークアップの取得、設定をするプロパティになります。取得はそのまま要素内にあるのすべてを取得します。設定というのは、既存の要素を削除して、新たに追加するというイメージを持っていただければと思います。

要素内のマークアップを取得する

指定した要素内のマークアップを取得してみます。下記ではidが「content」の要素内にあるマークアップを取得しています。

HTML

<div id="content">
  <h1>Yahoo!</h1>
</div>

JS

let content = document.getElementById('content');
console.log(content.innerHTML);

結果

<h1>Yahoo!</h1>

要素内のマークアップを書き換える

指定した要素内のマークアップをすべて書き換えます。要素内にあるマークアップをすべて削除して新たに要素を追加するようなイメージで使用することができます。

HTML

<div id="content">
  <h1>Yahoo!</h1>
</div>

JS

let content = document.getElementById('content');
content.innerHTML = '<h1>Google</h1>';

結果

//書き換え前
<div id="content">
  <h1>Yahoo!</h1>
</div>

//書き換え後
<div id="content">
  <h1>Google</h1>
</div>

要素内にマークアップが書き換わっているかと思います。

まとめ

最後に、innerHTMLについてまとめます。

• innerHTMLは指定した要素内のマークアップを取得する
• innerHTMLは指定した要素内のマークアップを書き換える

以上、innerHTMLで要素内のマークアップの取得・書き換え方法のご紹介でした！