.NET開発者のためのブログメディア

SE: JavaScriptでinnerHTMLはどのようなことができるのですか。

PM: 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>[email protected]</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('[email protected]'));

</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.

SE: innerHTMLをjQueryで記述することもできるのですね。

PM: はい、その通りです。ご紹介したソースコードをご自身でも書いてみてください。

まとめ

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020/03/17 2021/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020/03/16 2021/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

2020/03/05 2020/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

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

JavaScriptでのinnerHTMLの使い方とは？

取得

変更

追加

テーブルの行追加

jQueryで書く

まとめ

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

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

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

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

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

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