jQueryのDOM操作メソッド 〜要素の追加・削除編〜

after - 指定した要素の後ろに引数で指定した要素を追加

after()

$("#after").on("click",function(){
  $(this).after($(this).clone());
});

insertAfter - 指定した内容を引数で指定した要素の後ろに追加

insertAfter()

$("#insertAfter").on("click",function(){
  $(this).clone().insertAfter($(this));
});

append - 指定した要素の中の後ろに引数で指定した要素を追加

append()

$("#append").on("click",function(){
  $(this).append($(this).clone());
  console.log(this);
});

appendTo - 指定した内容を引数で指定した要素の中の後ろに追加

appendTo()

$("#appendTo").on("click",function(){
  console.log(this);
});

before - 指定した要素の前に引数で指定した要素を追加

before()

$("#before").on("click",function(){
  $(this).before($(this).clone());
});

insertBefore - 指定した内容を引数で指定した要素の前に追加

insertBefore()

$("#insertBefore").on("click",function(){
  $(this).clone().insertBefore($(this));
});

prepend - 指定した要素の中の前に引数で指定した要素を追加

prepend()

$("#prepend").on("click",function(){
  $(this).prepend($(this).clone());
});

prependTo - 指定した内容を引数で指定した要素の中の前に追加

prependTo()

$("#prependTo").on("click",function(){
  $(this).clone().prependTo($(this));
});

clone - 指定した要素の前に追加

記述済みなので省略

detach - 要素の削除

削除後もjQueryから参照可能
detach() detachTarget

var detachTarget = $("#detachTarget");
$("#detach").on("click",function(){
  var isDetachClass = $(this).toggleClass("detach");
  if(isDetachClass.hasClass("detach")) {
    detachTarget.detach();
  }else {
    $(this).after(detachTarget);
  }
});

remove - 要素の削除

remove()

$("#remove").on("click",function(){
  $(this).remove();
});

empty - 要素の削除

親を残して削除
empty()

$("#empty").on("click",function(){
  $(this).empty();
});

html - 指定したhtmlの取得・セット

html()

$("#html").on("click",function(){
  console.log($(this).html());//指定セレクタを除いたhtmlを返す
  $(this).html($(this).clone());
});

replaceAll - 引数で指定した要素を指定した要素と入れ替える

replaceAll()

$("#replaceAll").on("click",function(){
  $("<p>入れ替え</p>").replaceAll($(this));
});

replaceWith - 指定した要素と引数で指定した要素を入れ替える

replaceWith()

$("#replaceWith").on("click",function(){
  $(this).replaceWith($("<p>入れ替え</p>"));
});

text - テキストの取得と書き換え

text()

$("#text").on("click",function(){
  alert($(this).text());//テキストの取得
  $(this).text("差し替え");//差し替え
});

wrap - 指定した親要素で囲む

wrap()

$("#wrap").on("click",function(){
  $(this).wrap("<div style='padding: 10px; background-color: red;' />");
});

unwrap - 親要素を削除

unwrap()

$("#unwrap").on("click",function(){
  $(this).children("p").unwrap();
});

wrapInner - 指定した要素の中に子要素を入れる

wrapInner()

$("#wrapInner").on("click",function(){
  $(this).wrapInner("<p style='padding: 10px; background-color: red;' />");
});

wrapAll - 指定した要素全てを親要素で囲む

wrapAll()

$("#wrapAll").on("click",function(){
  $("button").wrapAll("<div style='padding: 10px; background-color: red;' />");
});