Estou tentando obter o HTML de um objeto selecionado com jQuery. Eu estou ciente da .html()função; o problema é que preciso do HTML, incluindo o objeto selecionado (neste caso, uma linha da tabela, onde .html()somente retorna as células dentro da linha).

Eu procurei e encontrei alguns métodos do tipo 'hackish' de clonar um objeto, adicionando-o a uma div recém criada, etc, etc, mas isso parece realmente sujo. Existe alguma maneira melhor ou a nova versão do jQuery (1.4.2) oferece algum tipo de outerHtmlfuncionalidade?

Edição de 2014: A pergunta e esta resposta são de 2010. Na época, nenhuma solução melhor estava amplamente disponível. Agora, muitas das outras respostas são melhores: Eric Hu ou Re Capcha, por exemplo.

Este site parece ter uma solução para você: jQuery: outerHTML | Yelotofu

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

Acredito que atualmente (1/5/2012), todos os principais navegadores suportam a função outerHTML. Parece-me que esse trecho é suficiente. Eu pessoalmente escolheria memorizar isso:

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

EDIT : estatísticas básicas de suporte paraelement.outerHTML

• Firefox (Gecko): 11 .... Lançado em 13-03-2012
• Chrome: 0.2 ............... Lançado 02-09-2008
• Internet Explorer 4.0 ... Lançado em 1997
• Opera 7 ...................... Lançado em 2003-01-28
• Safari 1.3 ................... Lançado 12-01-2006

Não há necessidade de gerar uma função para ele. Apenas faça assim:

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

(A propósito, o console do seu navegador mostrará o que é registrado. A maioria dos navegadores mais recentes desde 2009 tem esse recurso.)

A mágica é esta no final:

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

O clone significa que você não está realmente perturbando o DOM. Execute-o sem ele e você verá as ptags inseridas antes / depois de todos os hiperlinks (neste exemplo), o que é indesejável. Então, sim, use.clone() .

O modo como funciona é que ele pega cada atag, cria um clone na RAM, envolve petiquetas, obtém o pai dela (ou seja, a ptag) e, em seguida, obtém sua innerHTMLpropriedade.

EDIT : aconselhou e mudou divtags para ptags porque é menos digitado e funciona da mesma maneira.

Que tal prop('outerHTML'):?

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

E para definir:

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

Funcionou para mim.

PS : Isso é adicionado no jQuery 1.6 .

Estenda o jQuery:

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

E use-o assim: $("#myTableRow").outerHTML();

Eu concordo com Arpan (13 de dezembro de 10 5:59).

Sua maneira de fazer isso é realmente uma maneira MUITO melhor de fazê-lo, já que você não usa clone. O método clone consome muito tempo, se você tiver elementos filhos, e ninguém mais parecia se importar com o fato de o IE ter oouterHTML IE ter atributo (sim, o IE realmente tem alguns truques úteis na manga).

Mas eu provavelmente criaria o script dele um pouco diferente:

$.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;
    }
};

Para ser verdadeiramente jQuery-esque, convém outerHTML()ser um getter e um setter e ter seu comportamento o mais semelhante html()possível:

$.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;
}

Demonstração de trabalho: http://jsfiddle.net/AndyE/WLKAa/

Isso nos permite passar um argumento para outerHTML, que pode ser

• uma função cancelável - function (index, oldOuterHTML) { }- onde o valor retornado se tornará o novo HTML para o elemento (a menos que falseseja retornado).
• uma string, que será definida no lugar do HTML de cada elemento.

Para obter mais informações, consulte os documentos do jQuery para html().

Você também pode usar get (Recupere os elementos DOM correspondentes ao objeto jQuery.).

por exemplo:

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

Como método de extensão:

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

Ou

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

Escolha múltipla e retorne o html externo de todos os elementos correspondentes.

$('input').outerHTML()

Retorna:

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

Para criar um plug-in jQuery COMPLETO como .outerHTML, adicione o seguinte script a qualquer arquivo js e inclua após o jQuery em seu cabeçalho:

_atualizar Nova versão tem melhor controle, além de um serviço mais amigável ao 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);

Isso permitirá que você não apenas obtenha o outerHTML de um elemento, mas também receba um retorno de vários elementos ao mesmo tempo! e pode ser usado nos dois estilos padrão do jQuery:

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

Para vários elementos

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

Exemplos de trechos:

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>

você também pode fazer dessa maneira

document.getElementById(id).outerHTML

onde id é o id do elemento que você está procurando

Usei a solução de Jessica (que foi editada por Josh) para fazer com que o outerHTML funcionasse no Firefox. O problema, porém, é que meu código estava quebrando porque a solução dela envolveu o elemento em um DIV. A adição de mais uma linha de código resolveu esse problema.

O código a seguir fornece o outerHTML, deixando a árvore DOM inalterada.

$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;
    }
}

E use-o assim: $ ("# myDiv"). OuterHTML ();

Espero que alguém ache útil!

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

Violino aqui: http://jsfiddle.net/ezmilhouse/Mv76a/

Se o cenário estiver anexando uma nova linha dinamicamente, você poderá usar este:

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

.myrowé o nome da classe do <tr>. Ele faz uma cópia da última linha e a insere como uma nova última linha. Isso também funciona no IE7 , enquanto o [0].outerHTMLmétodo não permite atribuições no ie7

node.cloneNode () dificilmente parece um hack. Você pode clonar o nó e anexá-lo a qualquer elemento pai desejado e também manipulá-lo, manipulando propriedades individuais, em vez de ter que, por exemplo, executar expressões regulares nele ou adicioná-lo ao DOM e manipulá-lo depois.

Dito isto, você também pode iterar sobre os atributos do elemento para construir uma representação em string HTML dele. Parece provável que é assim que qualquer função outerHTML seria implementada se o jQuery adicionasse uma.

Eu usei a solução da Volomike atualizada por Jessica. Basta adicionar uma verificação para ver se o elemento existe e retornar em branco caso não exista.

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

Obviamente, use-o como:

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

Você pode encontrar uma boa opção .outerHTML () aqui https://github.com/darlesson/jquery-outerhtml .

Ao contrário de .html () que retorna apenas o conteúdo HTML do elemento, esta versão de .outerHTML () retorna o elemento selecionado e seu conteúdo HTML ou o substitui como método .replaceWith (), mas com a diferença que permite que o HTML substituto seja herdado por o encadeamento.

Exemplos também podem ser vistos no URL acima.

Observe que a solução de Josh funciona apenas para um único elemento.

Indiscutivelmente, o HTML "externo" só faz sentido quando você tem um único elemento, mas há situações em que faz sentido pegar uma lista de elementos HTML e transformá-los em marcação.

Estendendo a solução de Josh, este manipulará vários elementos:

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

Edit: outro problema com a solução de Josh corrigida, veja o comentário acima.

Outra solução semelhante com adição remove()do objeto DOM temporário.

Eu fiz esse teste simples com outerHTML sendo a solução tokimon (sem clone) e outerHTML2 sendo a solução jessica (clone)

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

e o resultado no meu navegador chromium (versão 20.0.1132.57 (0)) foi

outerHTML: 81ms
outerHTML2: 439ms

mas se usarmos a solução tokimon sem a função outerHTML nativa (que agora é suportada provavelmente em quase todos os navegadores)

Nós temos

outerHTML: 594ms
outerHTML2: 332ms

e haverá mais loops e elementos em exemplos do mundo real, então a combinação perfeita seria

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

O método clone é realmente mais rápido que o método wrap / desembrulhar
(jquery 1.7.2)

Aqui está um plugin outerHTML muito otimizado para jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => os outros dois trechos de código rápido não são compatíveis com alguns navegadores como 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 => Eu não concordo com você. outerHMTL não precisa de um getter E de um setter: o jQuery já nos fornece 'replaceWith' ...

@mindplay => Por que você está juntando todo o outerHTML? jquery.html retorna apenas o conteúdo HTML do PRIMEIRO elemento.

(Desculpe, não tem reputação suficiente para escrever comentários)

Curto e grosso.

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

ou evento mais doce com a ajuda das funções de seta

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

ou sem jQuery

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

ou se você não gostar dessa abordagem, verifique se

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

Isso é bastante simples com JavaScript baunilha ...

document.querySelector('#selector')

Isso é ótimo para alterar elementos no dom, mas NÃO funciona, ou seja, ao passar uma string html para o jquery como este:

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

Após alguma manipulação, criei uma função que permite que o acima funcione, ou seja, para strings html:

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

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

Me deparei com isso enquanto procurava uma resposta para o meu problema, que era tentar remover uma linha da tabela e adicioná-la novamente na parte inferior da tabela (porque eu estava criando linhas de dados dinamicamente, mas queria mostrar um 'Adicionar novo Linha do tipo 'Record' na parte inferior).

Eu tive o mesmo problema, na medida em que estava retornando o innerHtml, perdendo as tags TR, que continham o ID dessa linha e significavam que era impossível repetir o procedimento.

A resposta que encontrei foi que a remove()função jquery realmente retorna o elemento que ele remove como um objeto. Então, para remover e adicionar novamente uma linha, era tão simples quanto isso ...

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

Se você não estiver removendo o objeto, mas quiser copiá-lo em outro lugar, use a clone()função.

O plugin jQuery como uma abreviação para obter diretamente todo o elemento HTML:

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

E use-o assim: $(".element").outerHTML();

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

Onde 'x' é o número do nó, começando com 0 como o primeiro, deve obter o nó certo que você deseja, se estiver tentando obter um nó específico. Se você tem nós filhos, deve realmente colocar um ID no que deseja, para se concentrar apenas nele. Usar essa metodologia e nenhum 'x' funcionou bem para mim.

Solução simples.

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

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

Talvez eu não esteja entendendo sua pergunta corretamente, mas isso obterá o html do elemento pai do elemento selecionado.

É isso que você procura?