jQuery append() メソッドでできることとは？サンプルコード付きでわかりやすく解説
jQuery append() メソッド：追加された要素を返す
append() メソッドの挙動
基本的な append() メソッドの使い方は以下の通りです。
$(セレクタ).append(追加する要素);
このコードは、セレクタ で指定された要素の子要素として、追加する要素 を末尾に追加します。
しかし、このメソッドにはもう一つの役割があります。それは、追加された要素そのものを返すことです。
const appendedElements = $(セレクタ).append(追加する要素);
console.log(appendedElements);
このコードでは、append() メソッドの返り値を appendedElements 変数に格納しています。そして、コンソールにログ出力すると、実際に追加された要素 が表示されます。
append() メソッドの返り値を活用する例
append() メソッドの返り値を活用することで、様々な処理が可能になります。以下に、具体的な例をいくつかご紹介します。
例1：追加された要素にイベントを設定する
const appendedElements = $(セレクタ).append(追加する要素);
appendedElements.on('click', function() {
console.log('追加された要素がクリックされました！');
});
このコードでは、append() メソッドで追加された要素に click イベントを設定しています。こうすることで、追加された要素がクリックされたときに、好きな処理を実行することができます。
例2：追加された要素を別の要素に移動する
const appendedElements = $(セレクタ).append(追加する要素);
$(別のセレクタ).append(appendedElements);
このコードでは、append() メソッドで追加された要素を、別の要素の子要素として移動しています。
例3：追加された要素を非表示にする
const appendedElements = $(セレクタ).append(追加する要素);
appendedElements.hide();
append() メソッドは、要素を追加するだけでなく、追加された要素を操作するための様々な機能を提供します。返り値を活用することで、より柔軟な処理が可能になります。
- 複数の要素を追加する場合は、配列やオブジェクトを
append()メソッドに渡すことができます。 append()メソッドは、追加する要素を複製してから挿入します。そのため、元の要素と追加された要素は独立した存在となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery append() メソッド：例1</title>
<script src="https://jquery.com/"></script>
</head>
<body>
<button id="addButton">要素を追加</button>
<div id="target"></div>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
const appendedElement = $('<p>追加された要素がクリックされました！</p>');
appendedElement.appendTo('#target');
appendedElement.on('click', function() {
console.log('追加された要素がクリックされました！');
});
});
});
</script>
</body>
</html>
この例では、ボタンをクリックすると、#source 要素から #target 要素に <li> 要素が移動されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery append() メソッド：例2</title>
<script src="https://jquery.com/"></script>
</head>
<body>
<ul id="source">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<ul id="target"></ul>
<button id="moveButton">要素を移動</button>
<script>
$(document).ready(function() {
$('#moveButton').click(function() {
const appendedElements = $('#source li').appendTo('#target');
});
});
</script>
</body>
</html>
この例では、ボタンをクリックすると、#target 要素に新しい <div> 要素が追加され、すぐに非表示になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery append() メソッド：例3</title>
<script src="https://jquery.com/"></script>
</head>
<body>
<button id="addButton">要素を追加</button>
<div id="target"></div>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
const appendedElement = $('<div>追加された要素</div>').appendTo('#target');
appendedElement.hide();
});
});
</script>
</body>
</html>
jQuery append() メソッドの代替方法
insertAdjacentHTML() メソッド
insertAdjacentHTML() メソッドは、HTML文字列を指定した位置に挿入するネイティブのJavaScriptメソッドです。jQuery を使用する必要がなく、パフォーマンスも優れています。
element.insertAdjacentHTML('beforeend', '<p>新しい要素</p>');
このコードは、element 要素の末尾に新しい <p> 要素を挿入します。
Element.appendChild() メソッド
Element.appendChild() メソッドは、JavaScript のDOM操作用APIで、子要素を要素に追加します。
const newElement = document.createElement('p');
newElement.textContent = '新しい要素';
element.appendChild(newElement);
DocumentFragment
DocumentFragment は、DOMに追加する前に要素を一時的に保持するためのオブジェクトです。パフォーマンスを向上させるために、一度に複数の要素を追加する場合に有効です。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const newElement = document.createElement('li');
newElement.textContent = `アイテム${i + 1}`;
fragment.appendChild(newElement);
}
element.appendChild(fragment);
このコードは、10個の <li> 要素を作成し、DocumentFragment に追加します。その後、fragment を element 要素の子要素として追加します。
それぞれの方法の選び方
どの方法を選択するかは、状況によって異なります。
- 一度に複数の要素を追加する場合
DocumentFragmentを使用します。 - パフォーマンスを重視する場合
insertAdjacentHTML()メソッドまたはElement.appendChild()メソッドを使用します。 - シンプルさを重視する場合
append()メソッドが最も簡単でわかりやすい方法です。
上記以外にも、以下のような方法があります。
.html()メソッド：要素の内容を丸ごと置き換えます。.before()メソッド：要素の直前に要素を追加します。
jquery
