jQuery で outerHTML() を実現する

jQuery で、innerHTML じゃなくて outerHTML を実現する方法があった。

jQuery.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
}

jQuery: outerHTML – Yelotofu

わかりやすく書くとこんな感じか。

jQuery.fn.outerHTML = function(s) {
  if (s) {
    this.before(s);    # 自分の直前に挿入。
    this.remove();     # そして自分自身を削除。
    return this;
  } else {
    var dummy = jQuery("<p>")   # ダミーの <p> を作成。
    var elem = this.eq(0);      # 最初の要素を取り出し、
    dummy.append(elem.clone()); # そのコピーを <p> に挿入。
    return dummy.html();        # <p> の innerHTML を返す。
  }
}

なるほどねー。勉強になった。