jQueryで要素を作成する方法を学ぶ

新しい要素の作成は、jQueryJavaScriptライブラリで実行できる最も基本的なタスクの1つです。 jQueryを使用すると、タスクはDocument Object Model(DOM)を使用した同等のアプローチよりもはるかに簡単になります。また、jQueryを使用すればするほど、柔軟性と表現力が向上します。

目的を果たすには、要素をWebページに追加できる必要があります。 jQueryを使用して、新しいリストアイテムを追加する方法、または段落を新しいコンテンツに置き換える方法を学びます。

jQueryとは何ですか?

jQueryライブラリは、次の2つの主な目的を持つJavaScriptコードのコレクションです。

  • 一般的なJavaScript操作を簡素化します。
  • さまざまなブラウザ間の相互互換性のあるJavaScriptの問題を処理します。

2番目の目的はバグに対応しますが、ブラウザー間の実装の違いにも対処します。ブラウザは時間の経過とともに向上するため、どちらの目的も以前よりも必要性が低くなります。しかし、jQueryは依然として価値のあるツールです。

要素とは何ですか?

要素はタグと呼ばれることもあります。この2つは同じ意味で使用されることがよくありますが、微妙な違いがあります。タグは、テキストコンテンツをマークアップするためにHTMLファイルに含めるリテラル<p>または</ p>参照します。要素は、マークアップされたテキストを表す舞台裏のオブジェクトです。要素は、HTMLタグに対応するDOMと考えてください。

jQueryを使用して新しい要素を作成する方法

ほとんどのjQuery操作と同様に、要素の作成はドル関数$()から始まります。これはコアjQuery()関数へのショートカットです。この関数には、次の3つの明確な目的があります。

  • 要素、通常はドキュメントにすでに存在する要素と一致します
  • 新しい要素を作成します
  • DOMの準備ができたときにコールバック関数を実行します

HTMLを含む文字列を最初のパラメーターとして渡すと、この関数は新しい要素を作成します。

 $("<a>")

これは、要素のコレクションを含む特別なjQueryオブジェクトを返します。この場合、作成したばかりの「a」要素を表す単一のオブジェクトがあります。

このアクションを一致する要素と区別するには、文字列がHTMLのように見える必要があります。実際には、これは文字列が<で始まる必要があることを意味します。この方法を使用して、ドキュメントにプレーンテキストを追加することはできません。

これは要素をドキュメントに追加するのではなく、追加できる新しい要素を作成するだけであることを理解することが重要です。要素は「アタッチされていない」ため、メモリを消費しますが、実際には最終ページの一部ではありません。

より複雑なHTMLの追加

ドル関数は、実際には複数の要素を作成できます。実際、必要なHTML要素のツリーを構築できます。

 $("<ul><li>one</li><li>two</li><li>three</li></ul>")

この形式を使用して、次の属性を持つ要素を作成することもできます。

 $('<img src="photo.jpg" alt="my hometown" />')

新しい要素に属性を設定する方法

完全なHTML文字列を自分で作成しなくても、新しいjQuery要素を作成してその属性を設定できます。これは、属性値を動的に生成する場合に役立ちます。例えば:

 photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
$("<img>", { src: photo });

要素を追加する方法

新しい要素を作成したら、いくつかの異なる方法でそれをドキュメントに追加できます。 jQueryのドキュメントでは、これらのメソッドを 「操作」カテゴリにまとめてい ます

既存の要素の子として追加

$("body").append($("<p>Hello, world</p>"));
$(document.body).append($el);

たとえば、このメソッドを使用して、リストの最後に新しいリストアイテムを追加できます。

既存の要素の兄弟として追加します

$("p.last").after("<p>A new paragraph</p>")
$("ul li:first").before("<li>new item</li>")

これは、たとえば、他の2つの段落の途中に新しい段落を追加する場合に適しています。

既存の要素を置き換える

replaceWith()メソッドを使用して、既存の要素を新しく作成された要素と交換できます。

 $('#old').replaceWith("<p>New paragraph</p>");

既存の要素をラップアラウンド

これは非常にまれなユースケースですが、既存の要素を新しい要素で囲むことをお勧めします。たとえば、 preでラップしたいコード要素があるかもしれません:

 $('code#n1').wrap("<pre>")

作成した要素へのアクセス

$()関数はjQueryオブジェクトを返します。これは、フォローアップ操作に役立ちます。

 $el = $("p");
$('body').append($el);

慣例により、jQueryプログラマーはjQuery変数に先頭のドル記号を付けることがよくあることに注意してください。これは単なる命名スキームであり、 $()関数とは直接関係ありません。

jQueryを使用した要素の作成

ネイティブJavaScript関数を使用してDOMを操作できますが、jQueryを使用すると操作がはるかに簡単になります。 DOMをよく理解することは依然として非常に便利ですが、jQueryを使用するとDOMの操作がはるかに快適になります。