获取选定元素的外部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。
那是你以后的事？
