JavaScriptでのinnerHTMLの使い方とは？｜jQueryでの記述方法についても紹介
- システム
エンジニア - JavaScriptでinnerHTMLはどのようなことができるのですか。
- プロジェクト
マネージャー - innerHTMLを使うと、HTML要素の取得、変更、削除、追加などができます。
JavaScriptでのinnerHTMLの使い方とは？
今回は、JavaScriptでのinnerHTMLの使い方について説明します。innerHTMLを使うと、HTML要素の取得、変更、削除、追加などができます。また、jQueryでinnerHTMLを記述する方法についても紹介します。
JavaScriptでのinnerHTMLの使い方に興味のある方はぜひご覧ください。
取得
innerHTMLでHTML要素を取得する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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>
|
実行結果は以下のようになります。コンソールログを確認してください。
|
1
2
|
<p>Hello</p>
<p>world</p>
|
変更
innerHTMLでHTML要素を変更・削除する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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>
|
実行結果は以下のようになります。ボタンをクリックすると、HTML要素が変更されることが分かります。
See the Pen
innerHTML2 by kskumd (@kskumd)
on CodePen.
追加
innerHTMLでHTML要素を追加する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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>
|
実行結果は以下のようになります。ボタンをクリックすると、要素が追記されることが分かります。
See the Pen
innerHTML3 by kskumd (@kskumd)
on CodePen.
テーブルの行追加
innerHTMLでテーブル要素を追加する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<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>
|
実行結果は以下のようになります。
See the Pen
innerHTML4 by kskumd (@kskumd)
on CodePen.
jQueryで書く
innerHTMLをjQueryで記述する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!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>
|
実行結果は以下のようになります。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。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptのfor文基礎をご紹介！ループ処理する方法
JavaScriptの繰り返し処理 – for文の使い方とは？ 今回は、JavaScriptの繰り返し構文である、for文の使い方について説明します。 例えば、1から10まで繰り返し処理をしたり、配列の要素数 […]
-
jQueryのparentメソッドとは？parentメソッドの使用方法を紹介
jQueryでのparentメソッドの使い方とは？ 今回は、jQueryでのparentメソッドの使い方について説明します。parentメソッドを使用すれば、親要素を取得できます。 基本的な使い方から、引数の使い方につい […]
-
jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは
HTML要素であるidの特徴3つ CSSやJavaScriptで装飾するために必要であるHTMLの要素のidは、大きく分けて3つの性質を持っています。その性質や似た性質を持っているclassとの使い分けについて紹介してい […]
-
JavaScriptでのappendChildの扱い方とは？Fragmentを使用した複数要素の一括追加についても解説！
JavaScriptでのappendChildの使い方とは？ 今回は、JavaScriptでのappendChildの使い方について説明します。 appendChildを使用すると、親要素のもつ子要素の最後の要素に追加で […]
-
JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介
JavaScriptでのsetTimeoutの使い方とは？ 今回は、JavaScriptでのsetTimeoutの使い方について説明します。setTimeoutを使用すると、指定時間後に処理を実行することができます。 こ […]
