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

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

 
JavaScriptでのinnerHTMLの使い方とは?|jQueryでの記述方法についても紹介
基本情報技術者試験の試験対策はこちら>>
SE
JavaScriptでinnerHTMLはどのようなことができるのですか。
PM
innerHTMLを使うと、HTML要素の取得、変更、削除、追加などができます。

JavaScriptでのinnerHTMLの使い方とは?


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

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

取得

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

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

変更

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

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

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

追加

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

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

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

テーブルの行追加

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

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

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

jQueryで書く

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

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

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


SE
innerHTMLをjQueryで記述することもできるのですね。
PM
はい、その通りです。ご紹介したソースコードをご自身でも書いてみてください。

まとめ

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

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


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

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

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags