JavaScriptでのinnerHTMLの使い方とは？｜jQueryでの記述方法についても紹介

Javascript
プログラミング言語

公開日時: 2021-09-09 　更新日時: 2022-06-06

JavaScriptでのinnerHTMLの使い方とは？｜jQueryでの記述方法についても紹介

この記事でわかること

システム エンジニア: JavaScriptでinnerHTMLはどのようなことができるのですか。

プロジェクト マネージャー: innerHTMLを使うと、HTML要素の取得、変更、削除、追加などができます。

JavaScriptでのinnerHTMLの使い方とは？

今回は、JavaScriptでのinnerHTMLの使い方について説明します。innerHTMLを使うと、HTML要素の取得、変更、削除、追加などができます。また、jQueryでinnerHTMLを記述する方法についても紹介します。

JavaScriptでのinnerHTMLの使い方に興味のある方はぜひご覧ください。

取得

innerHTMLでHTML要素を取得する方法を紹介します。実際のソースコードを見てみましょう。

<div id="hello">
  <p>Hello</p>
</div>
<div id="world">
  <p>world</p>
</div>

<script>
  // 要素の取得
  var hello = document.getElementById("hello");
  // 要素の表示
  console.log(hello.innerHTML);

  // 要素の表示
  console.log(world.innerHTML);
</script>

<p>Hello</p>

</div>

<p>world</p>

</div>

// 要素の取得

var hello = document.getElementById("hello");

// 要素の表示

console.log(hello.innerHTML);

// 要素の表示

console.log(world.innerHTML);

</script>

実行結果は以下のようになります。コンソールログを確認してください。

<p>Hello</p>
<p>world</p>

1 2	<p>Hello</p> <p>world</p>

変更

innerHTMLでHTML要素を変更・削除する方法を紹介します。実際のソースコードを見てみましょう。

<div id="hello">
  <p>hoge</p>
</div>
<div id="world">
  <p>piyo</p>
</div>
<input type="button" value="change" onclick="change_html()">

<script>
  var change_html = function(){
    // 要素の取得
    var hello = document.getElementById("hello");
    // 要素の変更
    hello.innerHTML = "<p>Hello world!</p>";
    hello.style.color = "red";

    // 要素の取得
    var world = document.getElementById("world");
    // 要素の変更(削除)
    world.innerHTML = "";
  }
</script>

</div>

</div>

var change_html = function(){

// 要素の取得

var hello = document.getElementById("hello");

// 要素の変更

hello.innerHTML = "<p>Hello world!</p>";

hello.style.color = "red";

// 要素の取得

var world = document.getElementById("world");

// 要素の変更(削除)

world.innerHTML = "";

}

</script>

実行結果は以下のようになります。ボタンをクリックすると、HTML要素が変更されることが分かります。

See the Pen
innerHTML2 by kskumd (@kskumd)
on CodePen.

追加

innerHTMLでHTML要素を追加する方法を紹介します。実際のソースコードを見てみましょう。

<div>
  <p id="hello">Hello world! </p>
</div>
<input type="button" value="change" onclick="add_html()">

<script>
  var add_html = function(){
    // 要素の取得
    var hello = document.getElementById("hello");
    // 要素の追記
    hello.innerHTML += "Hello world! ";
  }
</script>

<div>

<p id="hello">Hello world! </p>

</div>

var add_html = function(){

// 要素の取得

var hello = document.getElementById("hello");

// 要素の追記

hello.innerHTML += "Hello world! ";

}

</script>

実行結果は以下のようになります。ボタンをクリックすると、要素が追記されることが分かります。

See the Pen
innerHTML3 by kskumd (@kskumd)
on CodePen.

テーブルの行追加

innerHTMLでテーブル要素を追加する方法を紹介します。実際のソースコードを見てみましょう。

<table border="1" cellspacing="0" cellpadding="4" id="table1">
  <tr>
    <th>name</th><th>age</th><th>email</th>
  </tr>
  <tr>
    <td>ichiro</td><td>20</td><td>ichiro@email.com</td>
  </tr>
  <tr>
    <td>jiro</td><td>25</td><td>jiro@email.com</td>
  </tr>
</table>

<script>
  /*
  * innerHTMLで追加
  */
  // 要素取得
  let table = document.getElementById('table1');
  // 追加用の行
  let newRow = table.insertRow();
  // name列
  let cell1 = newRow.insertCell(0);
  // age列
  let cell2 = newRow.insertCell(1);
  // email列
  let cell3 = newRow.insertCell(2);

  // 要素の追加
  cell1.innerHTML = '<td>saburo</td>';
  cell2.innerHTML = '<td>30</td>';
  cell3.innerHTML = '<td>saburo@email.com</td>';

  /*
  * appendChildで追加
  */
  newRow = table.insertRow();
  cell1 = newRow.insertCell(0);
  cell2 = newRow.insertCell(1);
  cell3 = newRow.insertCell(2);

  // 要素の追加
  cell1.appendChild(document.createTextNode('shiro'));
  cell2.appendChild(document.createTextNode(35));
  cell3.appendChild(document.createTextNode('shiro@email.com'));
</script>

<tr>

<th>name</th><th>age</th><th>email</th>

</tr>

<tr>

<td>ichiro</td><td>20</td><td>ichiro@email.com</td>

</tr>

<tr>

<td>jiro</td><td>25</td><td>jiro@email.com</td>

</tr>

</table>

* innerHTMLで追加

// 要素取得

let table = document.getElementById('table1');

// 追加用の行

let newRow = table.insertRow();

// name列

let cell1 = newRow.insertCell(0);

// age列

let cell2 = newRow.insertCell(1);

// email列

let cell3 = newRow.insertCell(2);

// 要素の追加

cell1.innerHTML = '<td>saburo</td>';

cell2.innerHTML = '<td>30</td>';

cell3.innerHTML = '<td>saburo@email.com</td>';

* appendChildで追加

newRow = table.insertRow();

cell1 = newRow.insertCell(0);

cell2 = newRow.insertCell(1);

cell3 = newRow.insertCell(2);

// 要素の追加

cell1.appendChild(document.createTextNode('shiro'));

cell2.appendChild(document.createTextNode(35));

cell3.appendChild(document.createTextNode('shiro@email.com'));

</script>

実行結果は以下のようになります。

See the Pen
innerHTML4 by kskumd (@kskumd)
on CodePen.

jQueryで書く

innerHTMLをjQueryで記述する方法を紹介します。実際のソースコードを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
  </head>
  <body>
    <div id="hello">
      <p>hoge</p>
    </div>
    <div id="world">
      <p>piyo</p>
    </div>
    <input type="button" value="change" onclick="change_html()">
    
    <script>
      var change_html = function(){
        // 要素の取得
        var hello = document.getElementById("hello");
        // 要素の変更
        hello.innerHTML = "<p>JavaScript</p>";
        hello.style.color = "red";

        // jQueryで取得、変更
        $("#world").html("jQuery").css('color', 'Red');
      }
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

var change_html = function(){

// 要素の取得

var hello = document.getElementById("hello");

// 要素の変更

hello.innerHTML = "<p>JavaScript</p>";

hello.style.color = "red";

// jQueryで取得、変更

$("#world").html("jQuery").css('color', 'Red');

}

</script>

</body>

</html>

実行結果は以下のようになります。jQueryの方がシンプルに記述できます。

See the Pen
innerHTML5 by kskumd (@kskumd)
on CodePen.

システム エンジニア: innerHTMLをjQueryで記述することもできるのですね。

プロジェクト マネージャー: はい、その通りです。ご紹介したソースコードをご自身でも書いてみてください。

まとめ

いかがでしたでしょうか。JavaScriptでのinnerHTMLの使い方について説明しました。innerHTMLを使うと、HTML要素の取得、変更、削除、追加などができます。また、jQueryでinnerHTMLを記述する方法についても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのinnerHTMLの使い方とは？｜jQueryでの記述方法についても紹介

JavaScriptでのinnerHTMLの使い方とは？

取得

変更

追加

テーブルの行追加

jQueryで書く

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのinnerHTMLの使い方とは？｜jQueryでの記述方法についても紹介

JavaScriptでのinnerHTMLの使い方とは？

取得

変更

追加

テーブルの行追加

jQueryで書く

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptのfor文基礎をご紹介！ループ処理する方法

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは

JavaScriptでのappendChildの扱い方とは？Fragmentを使用した複数要素の一括追加についても解説！

JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介