Saya mencoba untuk mendapatkan HTML dari objek yang dipilih dengan jQuery. Saya mengetahui .html()fungsinya; masalahnya adalah bahwa saya perlu HTML termasuk objek yang dipilih (baris tabel dalam kasus ini, di mana .html()hanya mengembalikan sel di dalam baris).

Saya telah mencari-cari dan menemukan beberapa metode tipe 'peretasan' yang sangat kloning objek, menambahkannya ke div yang baru dibuat, dll, dll, tetapi ini tampaknya sangat kotor. Apakah ada cara yang lebih baik, atau apakah versi baru jQuery (1.4.2) menawarkan outerHtmlfungsionalitas apa saja ?

Edit 2014: Pertanyaan dan balasan ini berasal dari 2010. Pada saat itu, tidak ada solusi yang lebih baik tersedia secara luas. Sekarang, banyak balasan lain yang lebih baik: Eric Hu, atau Re Capcha misalnya.

Situs ini tampaknya memiliki solusi untuk Anda: jQuery: outerHTML | Yelotofu

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

Saya percaya bahwa saat ini (5/1/2012), semua browser utama mendukung fungsi outerHTML. Menurut saya potongan ini sudah cukup. Saya pribadi akan memilih untuk mengingat ini:

// 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 : Statistik dukungan dasar untukelement.outerHTML

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

Tidak perlu menghasilkan fungsi untuk itu. Lakukan saja seperti ini:

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

(Ngomong-ngomong, browser Anda akan menunjukkan apa yang dicatat). Sebagian besar browser terbaru sejak sekitar 2009 memiliki fitur ini.)

Keajaibannya adalah ini pada akhirnya:

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

Klon berarti Anda tidak benar-benar mengganggu DOM. Jalankan tanpa itu dan Anda akan melihat ptag dimasukkan sebelum / sesudah semua hyperlink (dalam contoh ini), yang tidak diinginkan. Jadi, ya, gunakan .clone().

Cara kerjanya adalah bahwa ia mengambil setiap atag, membuat tiruannya dalam RAM, membungkusnya dengan ptag, mendapatkan induknya (artinya ptag), dan kemudian mendapatkan innerHTMLproperti itu.

EDIT : Mengambil saran dan mengubah divtag ke ptag karena kurang mengetik dan berfungsi sama.

Bagaimana dengan prop('outerHTML'):?

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

Dan untuk mengatur:

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

Ini berhasil untuk saya.

PS : Ini ditambahkan dalam jQuery 1.6 .

Perpanjang jQuery:

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

Dan gunakan seperti ini: $("#myTableRow").outerHTML();

Saya setuju dengan Arpan (13 Des 10 '5:59).

Cara dia melakukannya sebenarnya adalah cara yang jauh lebih baik untuk melakukannya, karena Anda tidak menggunakan klon. Metode klon sangat memakan waktu, jika Anda memiliki elemen anak, dan tidak ada orang lain yang peduli bahwa IE sebenarnya MEMILIKIouterHTML atribut (ya IE sebenarnya memiliki BEBERAPA trik yang berguna di lengannya).

Tapi saya mungkin akan membuat skripnya sedikit berbeda:

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

Untuk menjadi benar-benar jQuery-esque, Anda mungkin ingin outerHTML()menjadi rajin dan rajin dan memiliki perilakunya serupah html()mungkin:

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

Demo kerja: http://jsfiddle.net/AndyE/WLKAa/

Ini memungkinkan kita untuk menyampaikan argumen outerHTML, yang bisa jadi

• fungsi yang dapat dibatalkan - function (index, oldOuterHTML) { }- di mana nilai kembali akan menjadi HTML baru untuk elemen (kecualifalse dikembalikan).
• string, yang akan diatur sebagai pengganti HTML dari setiap elemen.

Untuk informasi lebih lanjut, lihat dokumen jQuery untuk html().

Anda juga bisa menggunakan get (Ambil elemen DOM yang cocok dengan objek jQuery.).

misalnya:

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

Sebagai metode ekstensi:

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

Atau

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

Pilihan ganda dan kembalikan html luar dari semua elemen yang cocok.

$('input').outerHTML()

kembali:

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

Untuk membuat plugin jQuery FULL sebagai .outerHTML, tambahkan skrip berikut ke file js apa saja dan sertakan setelah jQuery di header Anda:

_pembaruan Versi baru memiliki kontrol yang lebih baik serta layanan yang lebih ramah Selector jQuery! :)

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

Ini akan memungkinkan Anda untuk tidak hanya mendapatkan outerHTML dari satu elemen, tetapi bahkan mendapatkan pengembalian array beberapa elemen sekaligus! dan dapat digunakan dalam kedua gaya standar jQuery seperti:

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

Untuk banyak elemen

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

Contoh cuplikan:

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>

Anda juga bisa melakukannya dengan cara ini

document.getElementById(id).outerHTML

di mana id adalah id dari elemen yang Anda cari

Saya menggunakan solusi Jessica (yang diedit oleh Josh) untuk membuat outerHTML berfungsi di Firefox. Namun masalahnya adalah bahwa kode saya rusak karena solusinya membungkus elemen menjadi DIV. Menambahkan satu baris kode lagi menyelesaikan masalah itu.

Kode berikut memberi Anda outerHTML meninggalkan pohon DOM tidak berubah.

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

Dan gunakan seperti ini: $ ("# myDiv"). OuterHTML ();

Semoga seseorang menemukan itu berguna!

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

Biola di sini: http://jsfiddle.net/ezmilhouse/Mv76a/

Jika skenario menambahkan baris baru secara dinamis, Anda dapat menggunakan ini:

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

.myrowadalah nama kelas dari <tr>. Itu membuat salinan dari baris terakhir dan menyisipkannya sebagai baris terakhir yang baru. Ini juga berfungsi di IE7 , sementara [0].outerHTMLmetode ini tidak mengizinkan tugas di ie7

node.cloneNode () sepertinya tidak seperti peretasan. Anda dapat mengkloning node dan menambahkannya ke elemen induk yang diinginkan, dan juga memanipulasinya dengan memanipulasi properti individual, daripada harus misalnya menjalankan ekspresi reguler di atasnya, atau menambahkannya ke DOM, kemudian memanipulasinya setelah kata.

Yang mengatakan, Anda juga bisa beralih pada atribut elemen untuk membangun representasi string HTML itu. Sepertinya ini adalah bagaimana fungsi outerHTML akan diimplementasikan adalah jQuery untuk menambahkannya.

Saya telah menggunakan solusi Volomike yang diperbarui oleh Jessica. Baru saja menambahkan tanda centang untuk melihat apakah elemen itu ada, dan membuatnya kosong jika tidak ada.

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

Tentu saja, gunakan seperti:

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

Anda dapat menemukan opsi .outerHTML () yang bagus di sini https://github.com/darlesson/jquery-outerhtml .

Tidak seperti .html () yang hanya mengembalikan konten HTML elemen, versi .outerHTML () ini mengembalikan elemen yang dipilih dan konten HTML-nya atau menggantikannya sebagai metode .replaceWith () tetapi dengan perbedaan yang memungkinkan penggantian HTML diwarisi oleh rantai.

Contoh juga bisa dilihat di URL di atas.

Perhatikan bahwa solusi Josh hanya berfungsi untuk satu elemen.

Bisa dibilang, "luar" HTML hanya benar-benar masuk akal ketika Anda memiliki satu elemen, tetapi ada situasi di mana masuk akal untuk mengambil daftar elemen HTML dan mengubahnya menjadi markup.

Memperluas solusi Josh, yang ini akan menangani banyak elemen:

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

Sunting: masalah lain dengan solusi Josh diperbaiki, lihat komentar di atas.

Anothe solusi serupa dengan menambahkan remove()objek DOM sementara.

Saya telah membuat tes sederhana ini dengan outerHTML menjadi solusi tokimon (tanpa clone), dan outerHTML2 menjadi solusi 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");

dan hasilnya di browser chromium (Versi 20.0.1132.57 (0)) saya

outerHTML: 81ms
outerHTML2: 439ms

tetapi jika kita menggunakan solusi tokimon tanpa fungsi outerHTML asli (yang sekarang didukung di hampir setiap browser)

kita mendapatkan

outerHTML: 594ms
outerHTML2: 332ms

dan akan ada lebih banyak loop dan elemen dalam contoh dunia nyata, jadi kombinasi sempurna akan menjadi

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

jadi metode klon sebenarnya lebih cepat daripada metode wrap / unwrap
(jquery 1.7.2)

Berikut ini adalah plugin outerHTML yang sangat dioptimalkan untuk jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 snippet kode cepat lainnya tidak kompatibel dengan beberapa browser seperti 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 => Saya tidak setuju dengan Anda. outerHMTL tidak membutuhkan pengambil DAN penyetel: jQuery sudah memberi kami 'replaceWith' ...

@mindplay => Mengapa Anda bergabung dengan semua outerHTML? jquery.html hanya mengembalikan konten HTML dari elemen PERTAMA.

(Maaf, tidak memiliki reputasi yang cukup untuk menulis komentar)

Pendek dan manis.

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

atau acara yang lebih manis dengan bantuan fungsi panah

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

atau tanpa jQuery sama sekali

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

atau jika Anda tidak menyukai pendekatan ini, periksa itu

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

Ini cukup sederhana dengan JavaScript vanilla ...

document.querySelector('#selector')

Ini bagus untuk mengubah elemen pada dom tetapi TIDAK berfungsi misalnya saat memasukkan string html ke jquery seperti ini:

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

Setelah beberapa manipulasi saya telah membuat fungsi yang memungkinkan di atas untuk berfungsi yaitu untuk string html:

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

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

Saya menemukan ini sambil mencari jawaban untuk masalah saya yaitu bahwa saya mencoba untuk menghapus baris tabel kemudian menambahkannya kembali di bagian bawah tabel (karena saya secara dinamis membuat baris data tetapi ingin menunjukkan 'Tambah Baru Rekam jenis baris di bagian bawah).

Saya memiliki masalah yang sama, yaitu mengembalikan innerHtml sehingga tidak memiliki tag TR, yang menyimpan ID baris itu dan berarti tidak mungkin mengulangi prosedur.

Jawaban yang saya temukan adalah bahwa remove()fungsi jquery sebenarnya mengembalikan elemen, yang dihilangkan, sebagai objek. Jadi, untuk menghapus dan menambahkan kembali baris itu sesederhana ini ...

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

Jika Anda tidak menghapus objek tetapi ingin menyalinnya di tempat lain, gunakan clone()fungsi itu.

Plugin jQuery sebagai singkatan untuk langsung mendapatkan seluruh elemen HTML:

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

Dan gunakan seperti ini: $(".element").outerHTML();

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

Di mana 'x' adalah nomor simpul, dimulai dengan 0 sebagai yang pertama, harus mendapatkan simpul yang tepat yang Anda inginkan, jika Anda mencoba untuk mendapatkan yang spesifik. Jika Anda memiliki simpul anak, Anda harus benar-benar meletakkan ID pada yang Anda inginkan, hanya nol pada yang itu. Menggunakan metodologi itu dan tidak ada 'x' bekerja dengan baik untuk saya.

Solusi sederhana.

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

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

Mungkin saya tidak memahami pertanyaan Anda dengan benar, tetapi ini akan mendapatkan html elemen induk elemen yang dipilih.

Itukah yang Anda cari?