如何使用 jQuery 获取元素的标记，包括其自身？答案

【问题标题】：How do I get the markup of an element, including itself using jQuery?如何使用 jQuery 获取元素的标记，包括其自身？
【发布时间】：2009-06-12 16:25:28
【问题描述】：

我知道我可以将它的 .html() 包装在标签中，但元素本身具有动态设置的 id、类等。如何让 jQuery 返回元素的标记，包括它自己？

【问题讨论】：

我之前应该说明过这一点，但我正在处理大量的项目，最近发现 .append() 是一个处理器猪。没有 .append() 有什么方法可以做到这一点？

标签： jquery dom

【解决方案1】：

这会很好用：

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

【讨论】：

【解决方案2】：

据我所知，jQuery 中没有直接支持“outerHTML”，但你可以编写一个函数来模拟它（在 IE 以外的浏览器中），或者使用this plugin：

// this will return the element and it's mark-up, of an element
// with the id myTag
var outer = $('#myTag').outerHTML();

Brandon 显然不是唯一的实现。我相信你也可以想出其他聪明的实现。

编辑

如果您热衷于避免调用追加，也许您可以尝试这样的事情..

function getOuterHTML(el)
{   
    var wrapper = '';

    if(el)
    {
        var inner = el.innerHTML;
        var wrapper = '<' + el.tagName;

        for( var i = 0; i < el.attributes.length; i++ )
        {
            wrapper += ' ' + el.attributes[i].nodeName + '="';
            wrapper += el.attributes[i].nodeValue + '"';
        }
        wrapper += '>' + inner + '</' + el.tagName + '>';
    }
    return wrapper;
}


// now, to replicate the sample above
var outer = getOuterHTML($('#myTag'));

唯一的问题是，我不确定是否所有浏览器都支持属性数组.. 但我知道 mozilla-family 支持，并且 IE 对 outerHTML 有原生支持.. 试试看（对于那些不支持属性数组，你可以使用之前使用 appends 的方法）

【讨论】：

我之前应该说明过这一点，但我正在处理大量的项目，最近发现 .append() 是一个处理器猪。没有 .append() 有什么方法可以做到这一点？
@Justin，请参阅我添加到答案中的示例。它不使用任何附加..

【解决方案3】：

嗯，不用插件，我相信你可以试试

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML...
$('#myelement').get(0).outerHTML;

编辑：如果您的 jquery 选择器匹配多个项目，您可以遍历它们，请参阅 jquery 文档以获取示例

【讨论】：

outerHTML（它是一个属性，而不是一个函数顺便说一句）在 Firefox 中不受支持（我认为只有 IE 支持它）

【解决方案4】：

This blog post 可能会对您有所帮助。

他描述了一种看起来像这样的技术：

var html = $('<div>').append($('#top').clone()).remove().html()

这会克隆感兴趣的 div，将其附加到包装器 div，然后获取包装器的 html - 这等同于第一个 div 的原始 html。

他的建议只是在一个声明的包装器 div 中最初将它包围起来，但这似乎是一种更好的方法。那么你就不需要为这一切而烦恼了。

【讨论】：

【解决方案5】：

这个问题有点晚了。如果你使用 jQuery 来查找一个对象，你可以使用下面的代码来获取外层 HTML。

HTML：

<div class="obj">
    <a href="#" class="link">Link</a>
</div>

jQuery:

var $obj = $('.obj .link');
var outerHTML = $obj[0].outerHTML;

这将输出<a href="#" class="link">Link</a>。在最新的 Chrome、最新的 Firefox 和 IE11 上测试。这是一个 codepen 的链接：http://codepen.io/aj372/pen/ZLmYbj

【讨论】：

【解决方案6】：

无需任何代码，选择元素，选择第一个内部元素，获取其父元素（您想要的那个），然后将其包裹在来自 youElement.html() 的原始选择中。

【讨论】：

这将返回父级的所有子级。不仅仅是选定的孩子。