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 });