テキストの追加、要素の追加まとめ[JQuery]

JQuery を使ったテキスト操作のまとめ

基本の形

function(){
 $('ターゲット').メソッド('入力したいテキスト');
}

書き換え

$('ターゲット').text('書き換えたいテキスト');

ターゲットのテキストを書き換える

.text(”); とすると空欄になり、テキストを消すことができる

先頭に追加

$('ターゲット').prepend('追加したいテキスト');

ターゲットのテキストの先頭に文字を追加する

(例: 追加したテキストターゲット)

後ろに追加

$('ターゲット').append('追加したいテキスト');

ターゲットのテキストの後に文字を追加する

(例: ターゲット追加したテキスト)

前に要素を追加

$('ターゲット').before('<p>追加したい要素</p>');

ターゲットの前に要素(HTMLタグ)を追加する

(例:

追加した要素　

ターゲット)

後ろに要素を追加

$('ターゲット').after('<p>追加したい要素</p>');

ターゲットの後ろに要素(HTMLタグ)を追加する

(例:

ターゲット

追加した要素)

要素で囲む

$('ターゲット').wrap('<div></div>');

ターゲットを要素で囲む(親要素を付与する)

親要素を消す

$('ターゲット').unwrap('div');

ターゲットから親要素を取り除く

まとめて囲う

$('クラス').wrapAll('<div></div>');

親要素を付与して複数要素をまとめる

(例は該当するクラスを持つ要素をまとめて div に格納する)

コンテンツに要素をつける

$('ターゲット').wrapInner('<p></p>');

ターゲットの持つコンテンツに要素を付与する

(例: <div><p>ターゲット</p></div>