JQuery ile seçilen bir nesnenin HTML almaya çalışıyorum. .html()İşlevin farkındayım ; sorun, seçilen nesne ( .html()yalnızca satır içindeki hücreleri döndürür, bu durumda bir tablo satırı) dahil HTML gerekir olmasıdır .

Etrafı araştırdım ve bir nesne klonlama, yeni oluşturulan bir div, vb, vb ekleyerek birkaç çok 'hackish' türü yöntemleri buldum, ama bu gerçekten kirli görünüyor. Daha iyi bir yol var mı veya jQuery'nin (1.4.2) yeni sürümü herhangi bir outerHtmlişlevsellik sunuyor mu?

2014 Edit: Soru ve bu cevap 2010 yılındadır. O zamanlar, daha iyi bir çözüm mevcut değildi. Şimdi, diğer yanıtların birçoğu daha iyi: Örneğin Eric Hu's veya Re Capcha's.

Bu sitenin sizin için bir çözümü var gibi görünüyor: jQuery: outerHTML | Yelotofu

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

Şu anda (5/1/2012), tüm büyük tarayıcıların outerHTML işlevini desteklediğine inanıyorum. Bana öyle geliyor ki bu pasaj yeterli. Şahsen bunu ezberlemeyi tercih ederim:

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

DÜZENLEME : Temel destek istatistikleri içinelement.outerHTML

• Firefox (Gecko): 11 .... Yayınlanma tarihi 2012-03-13
• Chrome: 0.2 ............... Çıkış Tarihi 2008-09-02
• Internet Explorer 4.0 ... Çıktı 1997
• Opera 7 ...................... Çıkış 2003-01-28
• Safari 1.3 ................... Çıkış Tarihi 2006-01-12

Bunun için bir işlev üretmeye gerek yok. Sadece şu şekilde yapın:

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

(Tarayıcınızın konsolu bu arada nelerin günlüğe kaydedildiğini gösterecektir. 2009'dan beri en son tarayıcıların çoğunda bu özellik vardır.)

Sihir sonunda budur:

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

Klon, DOM'yi gerçekten rahatsız etmediğiniz anlamına gelir. Bu olmadan çalıştırın ve ptüm köprülerden önce / sonra (bu örnekte) eklenen etiketleri görürsünüz , bu istenmeyen bir durumdur. Yani, evet, kullan .clone().

Çalışma şekli, her aetiketi alır , RAM'de bir klon yapar, petiketlerle sarar , üst öğesini ( petiket anlamına gelir ) alır ve daha sonra onun innerHTMLözelliğini alır .

EDIT : Tavsiye aldı ve divetiketleri pdaha az yazdığı ve aynı şekilde çalıştığı için etiketlere değiştirdi .

Ne hakkında prop('outerHTML'):?

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

Ve ayarlamak için:

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

Benim için çalıştı.

Not : Bu, jQuery 1.6'ya eklenir .

JQuery'yi genişletin:

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

Ve şu şekilde kullanın: $("#myTableRow").outerHTML();

Arpan'a katılıyorum (13 Aralık 10:59).

Bunu yapma şekli aslında klon kullanmadığınız için bunu yapmanın çok daha iyi bir yoludur. Çocuk öğeleri varsa, klon yöntemi çok zaman alıcıdır ve başka kimse IE aslında outerHTMLözniteliğe sahip olmak umurumda görünmüyordu (evet IE aslında bazı yararlı hileler var kol).

Ama muhtemelen senaryosunu biraz farklı yaratacağım:

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

Gerçekten jQuery-esque outerHTML()olmak için, bir alıcı ve ayarlayıcı olmak ve davranışına olabildiğince benzer olmasını isteyebilirsiniz 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;
}

Çalışma demosu: http://jsfiddle.net/AndyE/WLKAa/

Bu bir bağımsız değişken geçirmeye olanak sağlıyor outerHTMLolabilen,

• iptal edilebilir bir işlev - function (index, oldOuterHTML) { }- dönüş değerinin öğe için yeni HTML olacağı ( falsedöndürülmedikçe).
• her öğenin HTML'sinin yerine ayarlanacak bir dize.

Daha fazla bilgi için, için jQuery belgelerine bakın html().

Get (jQuery nesnesiyle eşleşen DOM öğelerini al) da kullanabilirsiniz .

Örneğin:

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

Genişletme yöntemi olarak:

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

Veya

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

Çoktan seçmeli ve tüm eşleşen öğelerin dış html'sini döndürür.

$('input').outerHTML()

dönüş:

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

FULL jQuery eklentisini farklı yapmak .outerHTMLiçin aşağıdaki komut dosyasını herhangi bir js dosyasına ekleyin ve başlığınıza jQuery'den sonra ekleyin:

_güncelleme Yeni sürüm daha iyi kontrol yanı sıra daha jQuery Seçici dostu hizmet var! :)

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

Bu, yalnızca bir öğenin dışHTML'sini elde etmenizi sağlamakla kalmaz, aynı anda birden çok öğenin Array dönüşünü bile elde etmenizi sağlar! ve her iki jQuery standart stilinde de kullanılabilir:

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

Birden çok eleman için

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

Snippet Örnekleri:

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>

ayrıca sadece bu şekilde yapabilirsin

document.getElementById(id).outerHTML

Burada id, aradığınız öğenin kimliği

ExternalHTML'nin Firefox üzerinde çalışmasını sağlamak için Jessica'nın çözümünü (Josh tarafından düzenlenen) kullandım. Ancak sorun onun çözümü bir DIV içine sarılmış çünkü benim kod kırılması oldu. Bir kod satırı daha eklemek bu sorunu çözdü.

Aşağıdaki kod, DOM ağacını değiştirmeden outerHTML'yi verir.

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

Ve şu şekilde kullanın: $ ("# myDiv"). OuterHTML ();

Umarım birisi faydalı bulur!

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

Burada keman: http://jsfiddle.net/ezmilhouse/Mv76a/

Senaryo dinamik olarak yeni bir satır ekliyorsa, bunu kullanabilirsiniz:

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

.myrowsınıfının adıdır <tr>. Son satırın bir kopyasını oluşturur ve bunu yeni bir son satır olarak ekler. Bu yöntem IE7'de de çalışır , ancak [0].outerHTMLyöntem ie7'de atamalara izin vermez

node.cloneNode () neredeyse bir kesmek gibi görünmüyor. Düğümü klonlayabilir ve istediğiniz herhangi bir üst öğeye ekleyebilir ve ayrıca, örneğin üzerinde düzenli ifadeler çalıştırmak veya DOM'a eklemek, sonra da sözcükleri değiştirmek yerine, tek tek özellikleri manipüle ederek manipüle edebilirsiniz.

Bununla birlikte, bir HTML dizesi temsilini oluşturmak için öğenin nitelikleri üzerinde de yineleme yapabilirsiniz . Herhangi bir externalHTML işlevinin nasıl uygulanacağı muhtemelen bir tane eklemek için jQuery idi.

Jessica tarafından güncellenen Volomike çözümünü kullandım. Öğenin var olup olmadığını görmek için bir kontrol ekledim ve olmaması durumunda boş bırakılmasını sağladım.

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

Tabii ki, aşağıdaki gibi kullanın:

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

Https://github.com/darlesson/jquery-outerhtml adresinde iyi bir .outerHTML () seçeneği bulabilirsiniz .

Yalnızca öğenin HTML içeriğini döndüren .html () öğesinin aksine, bu .outerHTML () sürümü seçili öğeyi ve HTML içeriğini döndürür veya .replaceWith () yöntemi olarak değiştirir, ancak değiştirilen HTML'nin tarafından devralınmasına izin veren farkla zincirleme.

Örnekler yukarıdaki URL'de de görülebilir.

Josh'un çözümünün sadece tek bir eleman için işe yaradığını unutmayın.

Muhtemelen, "dış" HTML yalnızca tek bir öğeniz olduğunda gerçekten mantıklıdır, ancak HTML öğelerinin bir listesini almanın ve bunları biçimlendirmeye dönüştürmenin mantıklı olduğu durumlar vardır.

Josh'un çözümünü genişleten, bu birden fazla öğeyi ele alacak:

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

Düzenleme: Josh'un çözümü ile ilgili başka bir sorun düzeltildi, yukarıdaki yoruma bakın.

remove()Geçici DOM nesnesinin eklenmesiyle benzer bir çözüm .

Bu basit testi dışHTML tokimon çözeltisi (klon olmadan) ve dışHTML2 jessica çözeltisi (klon)

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

ve kromum (Sürüm 20.0.1132.57 (0)) tarayıcımdaki sonuç

dışHTML: 81ms
dışHTML2: 439ms

ancak yerel externalHTML işlevi olmadan tokimon çözümünü kullanırsak (şimdi hemen hemen her tarayıcıda desteklenmektedir)

aldık

dışHTML: 594ms
dışHTML2: 332ms

ve gerçek dünya örneklerinde daha fazla döngü ve eleman olacak, bu yüzden mükemmel kombinasyon

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

bu nedenle klon yöntemi aslında sarma / açma yönteminden daha hızlıdır
(jquery 1.7.2)

İşte jquery için çok optimize edilmiş bir dışHTML eklentisi: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => Diğer 2 hızlı kod parçacığı FF <11 gibi bazı tarayıcılarla uyumlu değil)

(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 => Size katılmıyorum. outerHMTL bir alıcıya ve bir ayarlayıcıya ihtiyaç duymaz: jQuery zaten bize 'replaceWith' veriyor ...

@mindplay => Neden tüm dışHTML'ye katılıyorsunuz? jquery.html yalnızca İLK öğenin HTML içeriğini döndürür.

(Üzgünüm, yorum yazmak için yeterli üne sahip değilsiniz)

Kısa ve güzel.

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

veya ok işlevleri yardımıyla daha tatlı olay

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

veya jQuery olmadan

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

veya bu yaklaşımı beğenmediyseniz,

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

Bu vanilya JavaScript ile oldukça basit ...

document.querySelector('#selector')

Bu, dom üzerindeki öğeleri değiştirmek için mükemmeldir, ancak bir html dizesinde böyle jquery'ye geçerken çalışmaz:

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

Bazı manipülasyon sonra yukarıda yani html dizeleri için çalışmasına izin veren bir işlev oluşturduk:

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

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

Bir tablo satırını kaldırmaya ve sonra tablonun alt kısmına geri eklemeye çalıştığım sorunum için bir cevap ararken buna rastladım (çünkü dinamik olarak veri satırları oluşturuyordum ama bir 'Yeni Ekle' 'Satırını altta kaydedin).

Aynı sorun vardı, bu yüzden innerHtml dönen bu yüzden bu satırın kimliğini tutan ve prosedürü tekrarlamak imkansız olduğu anlamına TR etiketleri eksikti.

Bulduğum cevap, jquery remove()fonksiyonunun aslında bir nesne olarak kaldırdığı öğeyi döndürmesiydi. Yani, bir satırı kaldırmak ve yeniden eklemek bu kadar basitti ...

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

Nesneyi kaldırmıyorsanız ancak başka bir yere kopyalamak istiyorsanız, clone()bunun yerine işlevi kullanın.

HTML'nin tamamını doğrudan almak için bir stenografi olarak jQuery eklentisi:

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

Ve şu şekilde kullanın: $(".element").outerHTML();

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

Burada 'x', ilk sayı olarak 0 ile başlayan düğüm numarasıdır, belirli bir tane almaya çalışıyorsanız, istediğiniz doğru düğümü almalıdır. Alt düğümleriniz varsa, gerçekten istediğiniz bir kimliği bir tanesine koymanız gerekir. Bu metodolojiyi kullanmak ve hiçbir 'x' benim için iyi sonuç vermedi.

Basit çözüm.

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

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

Belki de sorunuzu doğru anlamıyorum, ancak bu seçili öğenin üst öğesinin html'sini alacaktır.

Arkanız bu mu?