获取选定元素的外部 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 风格，您可能希望 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/

这允许我们将一个参数传递给 outerHTML，它可以是

一个可取消的函数 — function (index, oldOuterHTML) { } — 返回值将成为元素的新 HTML（除非返回 false）。

一个字符串，它将代替每个元素的 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
  }).join()
};

或者

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

多选并返回所有匹配元素的外部 html。

$('input').outerHTML()

返回：

'<input id="input1" type="text"><input id="input2" type="text">'

---

要将完整的 jQuery 插件设为 .outerHTML，请将以下脚本添加到任何 js 文件中，并在标头中包含 jQuery 之后：

update 新版本有更好的控制以及更 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，甚至可以一次获取多个元素的 Array 返回！并且可以在两种 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("我的外层HTML是：" + str); });

打开控制台查看结果

---

你也可以这样做

document.getElementById(id).outerHTML

其中 id 是您要查找的元素的 id

---

我使用 Jessica 的解决方案（由 Josh 编辑）让 outerHTML 在 Firefox 上运行。然而问题是我的代码被破坏了，因为她的解决方案将元素包装到了一个 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/

---

如果场景是动态添加新行，则可以使用：

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

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

---

node.cloneNode() 几乎不像是一个黑客。您可以克隆节点并将其附加到任何所需的父元素，还可以通过操作单个属性来操作它，而不必在其上运行正则表达式，或将其添加到 DOM，然后在后面操作它。

也就是说，您还可以 iterate over the attributes of the element 构造它的 HTML 字符串表示。如果 jQuery 添加一个，这似乎就是任何 outerHTML 函数的实现方式。

---

我使用了由 Jessica 更新的 Volomike 的解决方案。只需添加一个检查以查看元素是否存在，并使其返回空白以防万一。

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

当然，像这样使用它：

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

---

您可以在此处找到一个好的 .outerHTML() 选项 https://github.com/darlesson/jquery-outerhtml。

与仅返回元素的 HTML 内容的 .html() 不同，此版本的 .outerHTML() 返回所选元素及其 HTML 内容或将其替换为 .replaceWith() 方法，但不同之处在于允许替换的 HTML 被继承链接。

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

---

这对于原生 JavaScript 来说非常简单......

document.querySelector('#selector')

---

请注意，Josh 的解决方案仅适用于单个元素。

可以说，“外部”HTML 只有在您只有一个元素时才真正有意义，但在某些情况下，获取 HTML 元素列表并将它们转换为标记是有意义的。

扩展 Josh 的解决方案，这个解决方案将处理多个元素：

(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);

编辑：乔希解决方案的另一个问题已解决，请参阅上面的评论。

---

Anothe similar solution 添加了临时 DOM 对象的 remove()。

---

我做了这个简单的测试，outerHTML 是 tokimon 解决方案（没有克隆），outerHTML2 是 jessica 解决方案（克隆）

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");

我的 chromium（版本 20.0.1132.57 (0)）浏览器中的结果是

外层HTML：81 毫秒外层HTML2：439 毫秒

但是如果我们使用没有原生 outerHTML 功能的 tokimon 解决方案（现在几乎每个浏览器都支持该功能）

我们得到

外层HTML：594 毫秒外层HTML2：332 毫秒

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

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

所以克隆方法实际上比包装/解包方法更快（jquery 1.7.2）

---

这是一个针对 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 => 你为什么要加入所有的 outerHTML？ jquery.html 仅返回 FIRST 元素的 HTML 内容。

（对不起，没有足够的声誉来写评论）

---

短而甜。

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

或借助箭头功能使事件更甜蜜

[].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, '')

---

这对于更改 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();
};

---

$.html = el => $("<div>"+el+"</div>").html().trim();

---

我在寻找问题的答案时遇到了这个问题，即我试图删除一个表格行，然后将其重新添加到表格的底部（因为我正在动态创建数据行但想显示一个“添加新记录'类型行在底部）。

我遇到了同样的问题，因为它返回了 innerHtml，所以缺少 TR 标签，该标签保存了该行的 ID，这意味着不可能重复该过程。

我找到的答案是 jquery remove() 函数实际上将它删除的元素作为对象返回。所以，要删除并重新添加一行，就这么简单......

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

如果您不是要移除对象而是想将其复制到其他位置，请改用 clone() 函数。

---

jQuery插件作为简写直接获取整个元素HTML：

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

并像这样使用它：$(".element").outerHTML();

---

纯 JavaScript：

var outerHTML = function(node) {
  var div = document.createElement("div");
  div.appendChild(node.cloneNode(true));
  return div.innerHTML;
};

---

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

其中“x”是节点号，从 0 开始作为第一个，如果您想获得特定的节点，应该获得您想要的正确节点。如果你有子节点，你真的应该在你想要的那个上放一个 ID，但是，在那个上只是零。使用这种方法并且没有“x”对我来说效果很好。

---

简单的解决方案。

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

---

$("#myTable").parent().html();

也许我没有正确理解您的问题，但这将获得所选元素的父元素的 html。

这就是你所追求的吗？

---