我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
这对于更改dom上的元素非常有用,但在将html字符串传递到jquery时不适用,如下所示:
$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();
经过一些操作后,我创建了一个函数,该函数允许以上内容在ie中用于html字符串:
$.fn.htmlStringOuterHTML = function() {
this.parent().find(this).wrap('<div/>');
return this.parent().html();
};
其他回答
我同意Arpan的观点(2010年12月13日5:59)。
他的做法实际上是更好的做法,因为你不用克隆。如果您有子元素,克隆方法非常耗时,而且其他人似乎都不关心IE是否具有outerHTML属性(是的,IE实际上有一些有用的技巧)。
但我可能会创作一个有点不同的剧本:
$.fn.outerHTML = function() {
var $t = $(this);
if ($t[0].outerHTML !== undefined) {
return $t[0].outerHTML;
} else {
var content = $t.wrap('<div/>').parent().html();
$t.unwrap();
return content;
}
};
扩展jQuery:
(function($) {
$.fn.outerHTML = function() {
return $(this).clone().wrap('<div></div>').parent().html();
};
})(jQuery);
并像这样使用:$(“#myTableRow”).outerHTML();
我使用了Jessica更新的Volomike解决方案。只是添加了一个检查以查看元素是否存在,并使其返回空白以防不存在。
jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};
当然,可以这样使用:
$('table#buttons').outerHTML();
你也可以这样做
document.getElementById(id).outerHTML
其中id是要查找的元素的id
你可以在这里找到一个很好的.outerHTML()选项https://github.com/darlesson/jquery-outerhtml.
与仅返回元素的html内容的.html()不同,此版本的.outerHTML()返回所选元素及其html内容,或将其替换为.replaceWith()方法,但不同之处在于,替换的html可以通过链接继承。
示例也可以在上面的URL中看到。