obj の先頭に content を挿入します。

$("p").prepend("<em>insert</em>");    // <p><em>insert</em>...</p>

obj の末尾に content を挿入します。

$("p").append("<em>insert</em>");    // <p>...<em>insert</em></p>

obj を target の先頭に挿入します。

$("<em>insert</em>").prependTo("p");    // <p><em>insert</em>...</p>

obj を target の末尾に挿入します。

$("<em>insert</em>").appendTo("p");    // <p>...<em>insert</em></p>

obj の直前に content を挿入します。

$("p").before("<em>insert</em>");    // <em>insert</em><p>...</p>

function(...) の形式は、obj の直前に関数の戻り値を挿入します。index には要素のインデックス、html には要素の内部HTMLが渡されます。

$("p").before(function() {           // <em>insert</em><p>...</p>
    return "<em>insert</em>";
});

obj の直後に content や function(...) の戻り値を挿入します。

$("p").after("<em>insert</em>");    // <p>...</p><em>insert</em>

obj を target の直前に挿入します。

$("<em>insert</em>").insertBefore("p");    // <em>insert</em><p>...</p>

obj を target の直後に挿入します。

$("<em>insert</em>").insertAfter("p");    // <p>...</p><em>insert</em>

obj を wrappingElement 要素で囲みます。下記の例では、p要素を <div class='box'>～</div> で囲みます。

$("p").wrap("<div class='box' />");

  <p>...</p>
  <p>...</p>

<div class='box'>
  <p>...</p>
</div>
<div class='box'>
  <p>...</p>
</div>

function(index) を指定した場合は、関数の戻り値を wrappingElement とみなします。

$("div.url").wrap(function() {
    return "<a href='" + $(this).text() + "' />";
});

obj の要素集合をまとめて wrappingElement で囲みます。

$("p").wrapAll("<div class='box' />");

  <p>...</p>
  <p>...</p>

<div class='box'>
  <p>...</p>
  <p>...</p>
</div>

obj のコンテンツを wrappingElement で囲みます。

$("p").wrapInner("<em />");

<p>...</p>

<p><em>...</em></p>

target を obj で置き換えます。

$("<div>new Content</div>").replaceAll("div#d1");

obj を newContent で置き換えます。

$("div#d1").replaceWith("<div>new Content</div>");

関数を用いることも可能です。

$("h1").replaceWith(function() {
    return "<h2>" + $(this).html() + "</h2>";
});

obj要素の中から selector にマッチする要素を削除します。

$("div.current").remove();

obj要素の中から selector にマッチする要素を削除します。remove() が完全に削除するのに対して、detach() は jQuery要素として残り、再度挿入することが可能です。

var obj = $("div.current").detach();

obj の子孫要素をすべて削除します。

$("div.curent").empty();

obj の親要素を削除します。<div><p>...</p></div> とある時下記を実行すると、<p>...</p> のみになります。selector を指定した場合は、親要素がセレクタにマッチする場合のみ削除します。

$("p").unwrap();

<div>
  <p>...</p>
</div>

  <p>...</p>

obj を複製します。withDataAndEvents に true を指定すると、データやイベントハンドラも一緒にコピーします。規定値は false です。deepWithDataAndEvents を true にすると、子孫要素のデータやイベントもコピーします。規定値は withDataAndEvents と同じ値になります。

$("#d1").clone().insertAfter("#d2");

html() 等で設定する HTML に対するフィルタ関数を設定します。

$.htmlPrefilter = function(html) {
  return html.toLowerCase();
}
$("#d1").html('<p>ABC</p>');         // <p>abc</b> が設定される