UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#281 JavaScript DOM操作 innerHTMLに関して

記入日:2023-10-16 編集日:2023-10-16

JavaScript DOM操作 innerHTMLに関して解説をしてみようと思います。

この記事を読むと(約5分)
JavaScript DOM操作 innerHTMLに関してイメージできます。

JavaScript DOM操作 innerHTML

JavaScriptを使用してDOM(Document Object Model)を操作する際に、innerHTMLは非常に便利なプロパティです。 これを使うことで、特定の要素の内部のHTMLコンテンツを読み取ったり、変更したりすることができます。

以下に、innerHTMLを使った例を示します:

1. HTMLの基本構造
まず、以下のような基本的なHTML構造を持つページを考えます:

<!DOCTYPE html>
<html>
<head>
  <title>innerHTMLの例</title>
</head>
<body>
  <div id="myDiv">
    <p>初めの段落</p>
    <p>2番目の段落</p>
  </div>
  <button id="changeContent">コンテンツを変更</button>
</body>
</html>

2. JavaScriptでinnerHTMLを使用
次に、JavaScriptを使ってinnerHTMLを利用してみましょう。

// ボタンがクリックされた時に呼び出される関数
function changeContent() {
  // 'myDiv'というIDを持つ要素を取得
  var divElement = document.getElementById('myDiv');

  // 'myDiv'内部のHTMLを変更
  divElement.innerHTML = '<p>新しい段落</p><p>追加の段落</p>';
}

// 'changeContent'というIDを持つボタンを取得
var buttonElement = document.getElementById('changeContent');

// ボタンがクリックされた時にchangeContent関数を呼び出す
buttonElement.addEventListener('click', changeContent);

解説

  1. changeContent関数は、myDivというIDを持つ要素を取得し、その内部のHTMLを新しい内容で上書きします。
  2. getElementByIdメソッドは、指定したIDを持つ要素を取得します。
  3. addEventListenerメソッドは、特定のイベント(ここではclick)が発生した際に指定された関数(changeContent)を呼び出します。
  4. ボタンがクリックされたら、changeContent関数が実行され、myDiv内部のHTMLが新しい内容に置き換わります。

この例では、ボタンをクリックすると段落が新しい内容に置き換わる動作をします。innerHTMLはHTMLを含む文字列であるため、任意のHTML要素を追加、変更する際に非常に便利です。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。