jQuery中的outerHTML


看某处的一个js代码, 突然发现他用了一个方法叫做outer, 但是jQuery中并没有这个方法, 搜到的结果都是关于outerHTML的.

  var widgetContainer "#widget_" widgetId;
  var htmlStr $(widgetContainer).outer();

再以查找发现这个方法是对jQuery对象的扩展:

jQuery.fn.outer function() { 
  
  return $($('<div></div>').html(this.clone())).html();
};

jQuery中的html方法只能得到某个元素内部的HTML, 而有时候需要得到整个元素的HTML,包括该元素的标签, 这个叫做outer HTML, outerHTML是一个非标准属性, 只有IE支持.

上面的办法通过html方法间接的得到outerHTML,构造一个空的div元素, 将DOM元素作为HTML写入这个元素, 然后再用html得到其html.

下面是另一种方法,两者异曲同工.

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