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(~)
変更前<h5>text(~)</h5>
<p>変更前</p>
</section>
<script>
$(function(){
$(“#text1 p”).text(“変更後”);
});
</script>
結果
text()
変更前
<h5>text()</h5>
<p id=”texta”>変更前</p>
<p id=”textb”></p>
</section>
<script>
$(function(){
$(“#text2 p#textb”).text($(“#text2 p#texta”).text());
});
</script>
結果
html(~)
変更前<h5>html(~)</h5>
<p>変更前</p>
</section>
<script>
$(function(){
$(“#html1 p”).html(“変更後”);
});
</script>
結果
html()
変更前
<h5>html()</h5>
<p id=”htmla”>変更前</p>
<p id=”htmlb”></p>
</section>
<script>
$(function(){
$(“#html2 p#htmlb”).text($(“#html2 p#htmla”).text());
});
</script>
結果
prepend(~)
挿 入 前<h5>prepend(~)</h5>
<p> 挿 入 前 </p>
</section>
<script>
$(function(){
$(“#prepend p”).prepend(“<b>挿入後</b>”);
});
</script>
結果
append(~)
挿 入 前<h5>append(~)</h5>
<p> 挿 入 前 </p>
</section>
<script>
$(function(){
$(“#append p”).append(“<b>挿入後</b>”);
});
</script>
結果
before(~)
挿 入 前<h5>before(~)</h5>
<p> 挿 入 前 </p>
</section>
<script>
$(function(){
$(“#before p”).before(“<b>挿入後</b>”);
});
</script>
結果
after(~)
挿 入 前<h5>after(~)</h5>
<p> 挿 入 前 </p>
</section>
<script>
$(function(){
$(“#after p”).after(“<b>挿入後</b>”);
});
</script>
結果
prependTo(~)
移動前移動後
<h5>prependTo(~)</h5>
<p>移動前</p>
<b>移動後</b>
</section>
<script>
$(function(){
$(“#prependTo b”).prependTo(“#prependTo p”);
});
</script>
結果
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>
結果
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
});