【JavaScript】もう悩まない！jQueryを利用したDOM操作まとめ｜基本メソッドとサンプルコード集

2025-01-06 2025.05.19

1 DOM操作メソッド一覧
2 要素の非表示処理サンプル1
3 要素の非表示処理サンプル2
4 まとめ

jQueryは、ブラウザのDOM操作を簡単かつ強力に行うためのJavaScriptライブラリです。この記事では、よく使用されるjQueryのDOM操作メソッドを一覧で紹介し、それぞれの基本的な使い方とサンプルコードを提供します。また、特定の条件に基づいて要素を非表示にするなどの実用的なコード例も解説します。

DOM操作メソッド一覧

以下は、jQueryを使用してよく使われるDOM操作メソッドの一覧です。それぞれのメソッドは、要素の追加や移動、ラッピングなどを簡単に行うことができます。

text()

$('#class').text('テキスト');

append()

指定した要素を選択した要素の末尾に追加します。

$('#parent').append('<p>新しい段落</p>');

appendTo()

選択した要素を、指定した要素の末尾に追加します。append()の逆です。

$('<p>新しい段落</p>').appendTo('#parent');

prepend()

指定した要素を選択した要素の先頭に追加します。

$('#parent').prepend('<p>先頭に追加される段落</p>');

prependTo()

選択した要素を、指定した要素の先頭に追加します。prepend()の逆です。

$('<p>先頭に追加される段落</p>').prependTo('#parent');

after()

指定した要素を選択した要素の後ろに挿入します。

$('#element').after('<div>後ろに追加される<div>');

insertAfter()

選択した要素を、指定した要素の後ろに挿入します。after()の逆です。

$('<div>後ろに追加される<div>').insertAfter('#element');

before()

指定した要素を選択した要素の前に挿入します。

$('#element').before('<div>前に追加される<div>');

insertBefore()

選択した要素を、指定した要素の前に挿入します。before()の逆です。

$('<div>前に追加される<div>').insertBefore('#element');

wrap()

各選択要素を指定したHTMLでラップします。

$('.item').wrap('<div class="wrapper"></div>');

wrapInner()

各選択要素の内容を指定したHTMLでラップします。

$('.item').wrapInner('<span></span>');

wrapAll()

全ての選択要素を一つのHTML要素でラップします。

$('.items').wrapAll('<div class="all-wrapper"></div>');

これらのメソッドを組み合わせることで、複雑なDOM操作も簡単に実現できます。

要素の非表示処理サンプル1

以下のコードは、指定したクラスの要素のテキストが空である場合、その要素を非表示にするサンプルです。

$(function() {
  $('.class').each(function() {
    if ($(this).text().trim() === '') {
      $(this).hide();
    }
  });
});

解説:

$('.class').each(function() { ... });：クラス名が.classの各要素に対して処理を実行。
$(this).text().trim() === ''：要素内のテキストが空の場合。
$(this).hide();：条件に一致する要素を非表示にします。

要素の非表示処理サンプル2

次のコードは、テーブルの行(<tr>)内に空のセルがある場合、その行を非表示にするサンプルです。

$(function() {
  $('table tr').each(function() {
      var tdContent = $(this).find('td').html().trim();
      if (!tdContent) {
          $(this).css('display', 'none');
      }
  });
});