获取所选元素的外部 HTML

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

我四处搜索,发现了一些非常 “hackish” 类型的方法来克隆对象,将其添加到新创建的 div 等,等等,但这看起来确实很脏。有没有更好的方法,还是新版本的 jQuery(1.4.2)提供了任何一种outerHtml功能?

答案

我认为目前(2012 年 5 月 1 日),所有主要的浏览器都支持 externalHTML 函数。在我看来,此片段就足够了。我个人会选择记住这一点:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

编辑element.outerHTML 基本支持统计信息

无需为其生成函数。像这样做:

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

(顺便说一下,您的浏览器控制台将显示记录的内容。自 2009 年以来,大多数最新的浏览器都具有此功能。)

魔术到底是这样的:

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

克隆意味着您实际上并没有打扰 DOM。在没有它的情况下运行它,您会看到在所有超链接之前或之后插入p标签(在此示例中),这是不希望的。因此,是的,请使用.clone()

它的工作方式是,它需要每a标签,使得它的一个克隆的 RAM,与包装p标签,获取它的父(指p标签),然后得到innerHTML它的财产。

编辑 :采取了建议,并将div标签更改为p标签,因为它的键入较少且工作原理相同。

2014 编辑:问题和答复是 2010 年以来的。当时,没有更好的解决方案可供广泛使用。现在,许多其他答复都更好:例如 Eric Hu 或 Re Capcha 的答复。

这个站点似乎为您提供了一个解决方案:耶洛豆腐

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

怎么样: 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();

我同意 Arpan(2010 年 12 月 13 日 5:59)。

实际上,他的方法是一种更好的方法,因为您不使用克隆。如果您有子元素,则 clone 方法非常耗时,并且似乎没有其他人关心 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">'

要将 FULL 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);

这样,您不仅可以获取一个元素的 externalHTML,还可以一次获取多个元素的 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("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