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

1週間でできる会員サイト「Limited」

1週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能