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