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

SQL見るだけクエリ#283 JavaScript DOM操作 要素を作成・追加する方法に関して

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

JavaScript DOM操作 要素を作成・追加する方法に関して解説をしてみようと思います。

この記事を読むと(約5分)
JavaScript DOM操作 要素を作成・追加する方法に関してイメージできます。

JavaScript DOM操作 要素を作成・追加

JavaScriptを使用してDOM(Document Object Model)を操作して要素を作成する方法について、具体的な例を交えながら解説します。

例として、新しい段落要素を作成し、テキストを追加してみましょう。

// 新しい段落要素を作成
var newParagraph = document.createElement('p');

// テキストを作成
var paragraphText = document.createTextNode('これは新しい段落です。');

// テキストを段落要素に追加
newParagraph.appendChild(paragraphText);

// 新しい段落要素をDOMに追加
document.body.appendChild(newParagraph);

上記の例では、以下の手順を踏んでいます:

  1. document.createElement('p') を使用して新しい段落要素を作成します。
  2. document.createTextNode('これは新しい段落です。') を使用して新しいテキストノードを作成します。
  3. newParagraph.appendChild(paragraphText) を使用して、テキストノードを段落要素に追加します。
  4. document.body.appendChild(newParagraph) を使用して、新しい段落要素を文書のボディに追加します。
この結果として、HTML文書に新しい段落が追加され、その中に指定したテキストが表示されます。

さらに、もう少し複雑な例を示します。例えば、リストを作成してその中に複数の項目を追加する場合です。

// 新しいリスト要素を作成
var newList = document.createElement('ul');

// リストの項目を追加
for (var i = 1; i <= 3; i++) {
  var listItem = document.createElement('li');
  var listItemText = document.createTextNode('項目 ' + i);
  listItem.appendChild(listItemText);
  newList.appendChild(listItem);
}

// 新しいリスト要素をDOMに追加
document.body.appendChild(newList);

この例では、以下の手順を踏んでいます:

  1. document.createElement('ul') を使用して新しいリスト要素を作成します。
  2. for ループを使用して、リストの項目を作成し追加します。
  3. 各項目ごとに、document.createElement('li') で新しいリスト項目を作成し、document.createTextNode('項目 ' + i) でテキストノードを作成します。
  4. リスト項目のテキストをリスト項目に追加し、リスト項目をリストに追加します。
  5. 最終的に、新しいリストを文書のボディに追加します。
これにより、新しいリストが作成され、3つの項目が追加されます。

これらの例を参考にして、JavaScriptを使ってDOMを操作し、要素を作成する基本的な手法を理解できると良いでしょう。

SQLの使いどころ

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

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

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

KK

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