ti-enxame.com

jQuery, obtenha o html de um elemento inteiro

Desejo obter todo o html de um elemento selecionado e não apenas seu conteúdo. .html () usa o método innerHTML () do javascripts de acordo com a documentação. HTML:

<div id="divs">
  <div id="div1">
    <p>Some Content</p>
  </div>
  <div id="div2">
    <p>Some Content</p>
  </div>
</div>

Usando $('#divs:first').html(); retornará apenas o elemento de parágrafo. Eu quero pegar o html para o elemento inteiro, assim:

  <div id="div1">
    <p>Some Content</p>
  </div>

Eu não posso usar .parent porque isso retornará o html dos dois divs filhos.

114
Keyo

Você pode cloná-lo para obter todo o conteúdo, assim:

var html = $("<div />").append($("#div1").clone()).html();

Ou torná-lo um plugin, a maioria tende a chamar isso de "outerHTML", assim:

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

Então você pode apenas ligar:

var html = $("#div1").outerHTML();
186
Nick Craver

As diferenças podem não ser significativas em um caso de uso típico, mas usando a funcionalidade DOM padrão

$("#el")[0].outerHTML

é cerca de duas vezes mais rápido que

$("<div />").append($("#el").clone()).html();

então eu iria com:

/* 
 * Return outerHTML for the first element in a jQuery object,
 * or an empty string if the jQuery object is empty;  
 */
jQuery.fn.outerHTML = function() {
   return (this[0]) ? this[0].outerHTML : '';  
};
97
Pasi Jokinen

Você pode conseguir isso com apenas um código de linha.

$ ('# divs'). get (0) .outerHTML;

Tão simples como isso.

14
Shakti Shakya

Você pode facilmente obter a própria criança e todos os seus decedentes (filhos) com o método Clone () do Jquery, apenas

var child = $('#div div:nth-child(1)').clone();  

var child2 = $('#div div:nth-child(2)').clone();

Você obterá isso para a primeira consulta conforme solicitado

<div id="div1">
     <p>Some Content</p>
</div>
2
Abdul Jabbar Dumrai