こんにちは、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で要素内のマークアップの取得・書き換え方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。