获取选定元素的外部HTML

我试图用jQuery获取选定对象的HTML。 我知道.html()函数; 问题是我需要包含选定对象的HTML(在这种情况下是表格行,其中.html()只返回行内的单元格)。

我四处search,发现了一些非常“黑客”的克隆对象types的方法,将其添加到新创build的div等等,但是这看起来很脏。 有没有更好的方法,还是新版本的jQuery(1.4.2)提供了任何types的outerHtmlfunction?

2014编辑:这个问题和这个答复是从2010年。当时,没有更好的解决scheme被广泛使用。 现在,许多其他答案都比较好:Eric Hu,或Re Capcha。

这个网站似乎有你的解决scheme: jQuery:outerHTML | Yelotofu

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

我相信目前(5/1/2012),所有主stream浏览器都支持outerHTML函数。 在我看来,这个片段是足够的。 我个人会select记住这个:

 // Gives you the DOM element without the outside wrapper you want $('.classSelector').html() // Gives you the outside wrapper as well $('.classSelector')[0].outerHTML 

编辑element.outerHTML 基本支持统计

  • Firefox(壁虎):11 …. 发布2012-03-13
  • Chrome:0.2 …………… 发布2008-09-02
  • Internet Explorer 4.0 … 发布1997
  • 歌剧7 …………………. 发布2003-01-28
  • Safari 1.3 ………………. 发布2006-01-12

不需要为它生成一个函数。 只是这样做:

 $('a').each(function(){ var s = $(this).clone().wrap('<p>').parent().html(); console.log(s); }); 

(顺便说一句,您的浏览器的控制台会显示logging的内容。大多数最新的浏览器自2009年左右开始具有此function。)

魔术是这样结束的:

 .clone().wrap('<p>').parent().html(); 

克隆意味着你实际上并没有打扰到DOM。 没有它的情况下运行它,你会看到所有超链接之前/之后插入的p标签(在这个例子中),这是不可取的。 所以,是的,使用.clone()

它的工作方式是每个标签,在RAM中制作一个克隆,用p标签包装,获取它的父级(意思是p标签),然后获取它的innerHTML属性。

编辑 :采取了build议,并更改为p标签的div标签,因为它不那么打字和工作相同。

那么: prop('outerHTML')

 var outerHTML_text = $('#item-to-be-selected').prop('outerHTML'); 

并设置:

 $('#item-to-be-selected').prop('outerHTML', outerHTML_text); 

它为我工作。

PS :这是在jQuery 1.6中添加的。

扩展jQuery:

 (function($) { $.fn.outerHTML = function() { return $(this).clone().wrap('<div></div>').parent().html(); }; })(jQuery); 

像这样使用它: $("#myTableRow").outerHTML();

我同意阿尔潘(10月13日10点05分59秒)。

他这样做的方式实际上是一个更好的方法,因为你不使用克隆。 克隆方法是非常耗时的,如果你有子元素,而且没有其他人似乎在乎IE浏览器实际上具有outerHTML属性(是的,IE实际上有一些有用的技巧)。

但我可能会创build他的脚本有点不同:

 $.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风格的,你可能希望outerHTML()成为一个getter 一个setter,并且其行为与html()尽可能相似:

 $.fn.outerHTML = function (arg) { var ret; // If no items in the collection, return if (!this.length) return typeof arg == "undefined" ? this : null; // Getter overload (no argument passed) if (!arg) { return this[0].outerHTML || (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret); } // Setter overload $.each(this, function (i, el) { var fnRet, pass = el, inOrOut = el.outerHTML ? "outerHTML" : "innerHTML"; if (!el.outerHTML) el = $(el).wrap('<div>').parent()[0]; if (jQuery.isFunction(arg)) { if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false) el[inOrOut] = fnRet; } else el[inOrOut] = arg; if (!el.outerHTML) $(el).children().unwrap(); }); return this; } 

工作演示: http : //jsfiddle.net/AndyE/WLKAa/

这允许我们将parameter passing给outerHTML ,这可以是

  • 一个可取消的函数 – function (index, oldOuterHTML) { } – 返回值将成为元素的新HTML(除非返回false )。
  • 一个string,它将被设置在每个元素的HTML位置。

有关更多信息,请参阅html()的jQuery文档。

你也可以使用get (检索由jQuery对象匹配的DOM元素)。

例如:

 $('div').get(0).outerHTML;//return "<div></div>" 

作为扩展方法:

 jQuery.fn.outerHTML = function () { return this.get().map(function (v) { return v.outerHTML }) }; 

要么

 jQuery.fn.outerHTML = function () { return $.map(this.get(), function (v) { return v.outerHTML }) }; 

多选并返回一个html数组。

 $('input').outerHTML() 

返回:

 ["<input id="input1" type="text">", "<input id="input2" type="text">"] 

要制作一个完整的jQuery插件作为.outerHTML ,请将以下脚本添加到任何js文件中,并在您的标头中包含jQuery之后:

更新新版本有更好的控制以及更多的jQuery Selector友好的服务! 🙂

 ;(function($) { $.extend({ outerHTML: function() { var $ele = arguments[0], args = Array.prototype.slice.call(arguments, 1) if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele); if ($ele.length) { if ($ele.length == 1) return $ele[0].outerHTML; else return $.map($("div"), function(ele,i) { return ele.outerHTML; }); } throw new Error("Invalid Selector"); } }) $.fn.extend({ outerHTML: function() { var args = [this]; if (arguments.length) for (x in arguments) args.push(arguments[x]); return $.outerHTML.apply($, args); } }); })(jQuery); 

这将使您不仅可以获取一个元素的outerHTML,而且可以一次获得多个元素的数组返回! 并可以在这两个jQuery标准样式中使用:

 $.outerHTML($("#eleID")); // will return outerHTML of that element and is // same as $("#eleID").outerHTML(); // or $.outerHTML("#eleID"); // or $.outerHTML(document.getElementById("eleID")); 

对于多个元素

 $("#firstEle, .someElesByClassname, tag").outerHTML(); 

片段示例:

 console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML()); console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML()); var checkThisOut = $("div").outerHTML(); console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut); $.each(checkThisOut, function(i, str){ $("div").eq(i).text("My outerHTML Was: " + str); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js"></script> <div id="eleID">This will</div> <div id="firstEle">be Replaced</div> <div class="someElesByClassname">At RunTime</div> <h3><tag>Open Console to see results</tag></h3> 

你也可以这样做

 document.getElementById(id).outerHTML 

其中id是您正在查找的元素的id

我使用了Jessica的解决scheme(由Josh编辑)来让outerHTML在Firefox上运行。 然而,问题是我的代码破坏了,因为她的解决scheme将元素包装到DIV中。 添加一行代码解决了这个问题。

以下代码为您提供了保持DOM树不变的outerHTML。

 $jq.fn.outerHTML = function() { if ($jq(this).attr('outerHTML')) return $jq(this).attr('outerHTML'); else { var content = $jq(this).wrap('<div></div>').parent().html(); $jq(this).unwrap(); return content; } } 

像这样使用它:$(“#myDiv”)。outerHTML();

希望有人认为它有用!

 // no cloning necessary var x = $('#xxx').wrapAll('<div></div>').parent().html(); alert(x); 

小提琴: http : //jsfiddle.net/ezmilhouse/Mv76a/

如果场景dynamic添加新行,则可以使用以下命令:

 var row = $(".myRow").last().clone(); $(".myRow").last().after(row); 

.myrow<tr>的类名。 它会复制最后一行,并将其作为最后一行插入。 这也适用于IE7 ,而[0].outerHTML方法不允许在ie7中分配

node.cloneNode()几乎看起来像一个黑客。 您可以克隆节点并将其附加到任何所需的父元素,也可以通过操作各个属性来操作它,而不必像在其上运行正则expression式,或者将其添加到DOM中,然后在后处理它。

也就是说,你也可以迭代元素的属性来构造它的HTMLstring表示。 看来有可能这是如何使用jQuery来添加一个outerHTML函数。

请注意,乔希的解决scheme只适用于一个单一的元素。

可以说,只有当你有一个单一元素时,“外部”HTML才有意义,但是在某些情况下,把HTML元素列表变成标记是有意义的。

扩展乔希的解决scheme,这个将处理多个元素:

 (function($) { $.fn.outerHTML = function() { var $this = $(this); if ($this.length>1) return $.map($this, function(el){ return $(el).outerHTML(); }).join(''); return $this.clone().wrap('<div/>').parent().html(); } })(jQuery); 

编辑:乔什的解决scheme的另一个问题修复,见上面的评论。

类似的解决scheme添加了remove()的临时DOM对象。

我已经用outerHTML作为tokimon解决scheme(没有克隆)做了这个简单的testing,而outerHTML2是jessica解决scheme(克隆)

 console.time("outerHTML"); for(i=0;i<1000;i++) { var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML(); } console.timeEnd("outerHTML"); console.time("outerHTML2"); for(i=0;i<1000;i++) { var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2(); } console.timeEnd("outerHTML2"); 

和我的铬(版本20.0.1132.57(0))浏览器的结果是

outerHTML:81ms
outerHTML2:439ms

但是如果我们使用tokimon解决scheme而没有本地的outerHTML函数(现在几乎每个浏览器都支持这个函数)

我们得到

outerHTML:594ms
outerHTML2:332ms

在现实世界的例子中会有更多的循环和元素,所以完美的组合会是

 $.fn.outerHTML = function() { $t = $(this); if( "outerHTML" in $t[0] ) return $t[0].outerHTML; else return $t.clone().wrap('<p>').parent().html(); } 

所以克隆方法实际上比wrap / unwrap方法更快
(jQuery 1.7.2)

我使用了由Jessica更新的Volomike解决scheme。 只是添加了一个检查,看看是否存在的元素,并使其返回空白的情况下,它不。

 jQuery.fn.outerHTML = function() { return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : ''; }; 

当然,使用它就像:

 $('table#buttons').outerHTML(); 

您可以在https://github.com/darlesson/jquery-outerhtmlfind一个好的;.outerHTML()选项。

与仅返回元素的HTML内容的.html()不同的是。这个版本的.outerHTML()返回选定元素及其HTML内容,或者将其replace为.replaceWith()方法,但是区别在于允许replaceHTML被inheritance链接。

示例也可以在上面的URL中看到。

这对改变DOM上的元素是很好的,但是当把一个htmlstring传递给jquery的时候不起作用:

 $('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML(); 

经过一些操作,我已经创build了一个函数,允许上述工作在ie的htmlstring:

 $.fn.htmlStringOuterHTML = function() { this.parent().find(this).wrap('<div/>'); return this.parent().html(); }; 

这里是一个非常优化的jQuery的outerHTML插件:( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 =>其他2个快速代码片段与FF <11等浏览器不兼容)

 (function($) { var DIV = document.createElement("div"), outerHTML; if ('outerHTML' in DIV) { outerHTML = function(node) { return node.outerHTML; }; } else { outerHTML = function(node) { var div = DIV.cloneNode(); div.appendChild(node.cloneNode(true)); return div.innerHTML; }; } $.fn.outerHTML = function() { return this.length ? outerHTML(this[0]) : void(0); }; })(jQuery); 

@Andy E =>我不同意你的看法。 outerHMTL不需要一个getter和一个setter:jQuery已经给我们'replaceWith'…

@mindplay =>你为什么join所有的outerHTML? jquery.html只返回FIRST元素的HTML内容。

(对不起,没有足够的声望写评论)

简短而甜蜜。

 [].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '') 

或在箭头function的帮助下更加甜美的事件

 [].reduce.call($('.x'), (i,v) => i+v.outerHTML, '') 

或者根本没有jQuery

 [].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '') 

或者如果你不喜欢这种方法,请检查一下

 $('.x').get().reduce((i,v) => i+v.outerHTML, '') 

我遇到了这个问题,同时寻找我的问题的答案,那就是我试图删除一个表行,然后将其添加回到表的底部(因为我dynamic创build数据行,但想显示“添加新logging在底部的types行)。

我有同样的问题,因为它正在返回innerHtml,所以错过了TR标签,它持有该行的ID,意味着不可能重复该过程。

我发现的答案是,jquery remove()函数实际上返回作为一个对象删除的元素。 所以,删除并重新添加一个行就像这样简单…

 var a = $("#trRowToRemove").remove(); $('#tblMyTable').append(a); 

如果你不是删除对象,而是想把它复制到别的地方,那就改用clone()函数。

 $("#myNode").parent(x).html(); 

其中'x'是节点号,从0开始作为第一个节点,应该得到你想要的正确的节点,如果你想获得一个特定的节点。 如果你有孩子的节点,那么你应该真的把一个ID放在你想要的那个上,然后把它放在那个上面。 使用这种方法,没有'x'为我工作得很好。

解决scheme简单

 var myself = $('#div').children().parent(); 
 $("#myTable").parent().html(); 

也许我没有正确理解你的问题,但是这将得到所选元素的父元素的HTML。

那是你以后的事?