jQueryのDOMに関する操作


ここではjQueryによるDOMの操作について紹介します。

🚌 HTMLの加工

要素内の末尾に引数を追加:append

<ul><li>fuga</li></ul><ul><li>fuga</li><li>要素を末尾に追加</li></ul>とします。

$('ul').append('<li>要素を末尾に追加</li>');

要素をほかの要素内の末尾に追加:appendTo

$(A).append(B)$(B).appendTo(A)が同じ動作になります。

$('<li>要素を末尾に追加</li>').appendTo('ul');

要素内の先頭に引数を追加:prepend

<ul><li>fuga</li></ul><ul><li>hoge</li><li>要素を先頭に追加</li></ul>とします。

$('ul').prepend('<li>要素を先頭に追加</li>');

要素をほかの要素内の先頭に追加:prependTo

$(A).prepend(B)$(B).prependTo(A)が同じ動作になります。

$('<li>要素を先頭に追加').prependTo('ul');

要素外の末尾に引数を追加:after

<ul><li>fuga</li></ul><ul><li>hoge</li></ul><p>最後に追加</p>とします。

$('ul').after('<p>最後に追加</p>');

要素外の末尾に引数を追加:insertAfter

$(A).after(B)$(B).insertAfter(A)が同じ動作になります。

$('<p>最後に追加</p>').insertAfter('ul');

要素外の末尾に引数を追加:before

<ul><li>fuga</li></ul><p>最初に追加</p><ul><li>hoge</li></ul>とします。

$('ul').before('<p>最初に追加</p>');

要素外の末尾に引数を追加:insertAfter

$(A).before(B)$(B).insertBefore(A)が同じ動作になります。

$('<p>最初に追加</p>').insertAfter('ul');

要素の外側を引数のHTMLタグで囲む:wrap

<p>hoge</p><div><p>hoge</p></div>にします。

$('p').wrap('<div />');

要素の内側を引数のHTMLタグで囲む:wrapInner

<p>hoge</p><p><div>hoge</div></p>にします。

$('p').wrapInner('<div />');

要素の内側を引数のHTMLタグで囲む:wrapAll

<p>hoge</p><p>fuga</p><div><p>hoge</p><p>fuga</p></div>にします。

$('p').wrapInner('<div />');

🎉 フォーム要素の変更

チェックボックスの情報取得:prop

チェックボックスのチェックが入っているかをチェックするのは、次のコマンドです。

// チェックボックスのチェックしているかどうかを返す
$('input:checkbox').prop("checked"); //=> true / false
// チェックを行う場合
$('input:checkbox').prop("checked", true);

🏈 デモ

紹介したメソッドの動作確認は次のサイトで確認できます。

DOM要素追加メソッドまとめ

🐯 参考リンク

📚 おすすめの書籍