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>

結果