More than 1 year has passed since last update.

JQueryでのDOM操作

Posted at 2022-10-05

はじめに

JQueryでのDOM操作をすることが多いため、業務内で頻繁に使用したもの、また基本的な操作をまとめた。

$('')の第一引数に操作したいDOMを指定

$('div')

IDを指定

$('#id')

クラスを指定

$('.class')

要素の絞り込み

element.find('#ID >class')

親子で絞り込み

$('parent > child')

.html()：要素内のHTMLを取得

 element.html();

引数に要素を指定することでHTMLの書き換えもできる。

element.html('<p>新しいコンテンツを追加</p>');

.prepend()：指定した要素内部の先頭に追加

// 挿入先.prepend(追加したい要素)
element.prepend(target)

$(itemElement).find('.class').prepend('<span class="first"></span>');

⇄
.prependTo()

// 追加したい要素.prependTo(挿入先)
target.prependTo(element)

.append()：指定した要素内部の最後に追加

// 挿入先.append(追加したい要素)
element.append(target)

⇄
.appendTo()

// 追加したい要素.appendTo(挿入先)
target.appendTo(element)

$(itemElement).find('.class').appendTo(element);

.before()：指定した要素の前に追加

// 挿入先.before(追加したい要素)
element.before(target)

$(itemElement).find('.first').before($(itemElement).find('.second'));

⇄
.insertBefore()

// 追加したい要素.insertBefore(挿入先)
target.insertBefore(element)

.after()：指定した要素の後に追加

// 挿入先.after(追加したい要素)
element.after(target)

⇄
.insertAfter()

// 追加したい要素.insertAfter(挿入先)
target.insertAfter(element)

$('#itemElement　.element').append('<div class="third">')
    .children('div.third').append('<button class="btn">ボタン</button>');

element.find('.class').remove();

.includes()：要素が含まれているかどうかをbool型で教えてくれる。

txtOrderDate.includes('こんにちは');

.replace()：第一引数に第一引数に置換前、第二引数に置換後の文字列を挿入することで文字列を置き換えることができる。

element.replace('おはよう','こんばんは');

// 繋げることで複数の要素を置換できる
element.find('.hello').html().replace('おはよう','こんばんは').replace('ようこそ','さようなら')

.split():指定した文字列で配列に分割する。

element.html().split('/');