jQuery DOM操作

一覧

命令	機能	例
text(～)	テキスト変更
text()	テキスト取得
html(～)	テキスト変更
html()	テキスト取得
prepend(～)	要素の先頭へHTML挿入
append(～)	要素の末尾へHTML挿入
before(～)	要素の前にHTML挿入
after(～)	要素の後にHTML挿入
prependTo(～)	要素の先頭へHTML移動
appendTo(～)	要素の末尾へHTML移動
insertBefore(～)	要素の前へHTML移動
insertAfter(～)	要素の後へHTML移動
wrap(～)	要素で包む
wrapAll(～)	要素をまとめて包む
wrapInner(～)	子要素/テキストを要素で包む
unwrap()	親要素を削除
replaceWith(～)	要素を置換
remove()	要素を削除
attr(～,～)	属性値変更
attr(～)	属性値取得
removeAttr(～)	属性削除
addClass(～)	class属性追加
removeClass(～)	class属性削除
css(～,～)	CSS属性値設定
css(～)	CSS属性値取得

DOM操作命令

text(～)

変更前

<section id=”text1″> <h5>text(～)</h5> <p>変更前</p> </section> <script> $(function(){ $(“#text1 p”).text(“変更後”); }); </script> 結果

text()

変更前

<section id=”text2″> <h5>text()</h5> <p id=”texta”>変更前</p> <p id=”textb”></p> </section> <script> $(function(){ $(“#text2 p#textb”).text($(“#text2 p#texta”).text()); }); </script> 結果

html(～)

変更前

<section id=”html1″> <h5>html(～)</h5> <p>変更前</p> </section> <script> $(function(){ $(“#html1 p”).html(“変更後”); }); </script> 結果

html()

変更前

<section id=”html2″> <h5>html()</h5> <p id=”htmla”>変更前</p> <p id=”htmlb”></p> </section> <script> $(function(){ $(“#html2 p#htmlb”).text($(“#html2 p#htmla”).text()); }); </script> 結果

prepend(～)

挿　入　前

<section id=”prepend”> <h5>prepend(～)</h5> <p>　挿　入　前　</p> </section> <script> $(function(){ $(“#prepend p”).prepend(“<b>挿入後</b>”); }); </script> 結果

append(～)

挿　入　前

<section id=”append”> <h5>append(～)</h5> <p>　挿　入　前　</p> </section> <script> $(function(){ $(“#append p”).append(“<b>挿入後</b>”); }); </script> 結果

before(～)

挿　入　前

<section id=”before”> <h5>before(～)</h5> <p>　挿　入　前　</p> </section> <script> $(function(){ $(“#before p”).before(“<b>挿入後</b>”); }); </script> 結果

after(～)

挿　入　前

<section id=”after”> <h5>after(～)</h5> <p>　挿　入　前　</p> </section> <script> $(function(){ $(“#after p”).after(“<b>挿入後</b>”); }); </script> 結果

prependTo(～)

移動前 移動後

<section id=”prependTo”> <h5>prependTo(～)</h5> <p>移動前</p> <b>移動後</b> </section> <script> $(function(){ $(“#prependTo b”).prependTo(“#prependTo p”); }); </script> 結果

appendTo(～)

移動前 移動後

<section id=”appendTo”> <h5>appendTo(～)</h5> <b>移動前</b> <p>移動後</p> </section> <script> $(function(){ $(“#appendTo b”).appendTo(“#appendTo p”); }); </script> 結果

insertBefore(～)

移動前 移動後

<section id=”insertBefore”> <h5>insertBefore(～)</h5> <b>移動前</b> <p>移動後</p> </section> <script> $(function(){ $(“#insertBefore p”).insertBefore(“#insertBefore b”); }); </script> 結果

insertAfter(～)

移動前 移動後

<section id=”insertAfter”> <h5>insertAfter(～)</h5> <b>移動前</b> <p>移動後</p> </section> <script> $(function(){ $(“#insertAfter b”).insertAfter(“#insertAfter p”); }); </script> 結果

wrap(～)

wrap対象

<section id=”wrap”> <h5>wrap(～)</h5> <p>wrap対象</p> </section> <script> $(function(){ $(“#wrap p”).wrap(“<b></b>”); }); </script> 結果

wrapAll(～)

wrapAll対象 wrapAll対象

<section id=”wrapAll”> <h5>wrapAll(～)</h5> <p>wrapAll対象</p> <p>wrapAll対象</p> </section> <script> $(function(){ $(“#wrapAll p”).wrapAll(“<b></b>”); }); </script> 結果

wrap対象に別の要素がある場合 wrapAll対象 wrapAll対象外 wrapAll対象

<section id=”wrapAll2″> <h5>wrapAll(～)</h5> <p>wrapAll対象</p> wrapAll対象外<br> <p>wrapAll対象</p> </section> <script> $(function(){ $(“#wrapAll2 p”).wrapAll(“<b></b>”); }); </script> 結果

table要素操作

<table id="tbl"> 　　<tr><th>1</th><th>a</th></tr> 　　<tr><td>2</td><td class="aaa">b</td></tr> 　　<tr><td>3</td><td class="aaa">c</td></tr> </table> var tbl = document.getElementById(‘tbl’) $(‘.aaa’).each(function(index, elm){ 　　　var val = tbl.rows[index + 1].cells[1].innerHTML; 　　　　→val：b 　　　var val = elm.innerHTML; 　　　　→val：b });