Bir jQuery nesnesini bir dizeye nasıl dönüştürürsünüz?

Tam HTML dizesini istediğinizi varsayalım. Eğer durum buysa, böyle bir şey işinizi görecektir:

$('<div>').append($('#item-of-interest').clone()).html(); 

Bu, burada daha derinlemesine açıklanmaktadır , ancak temel olarak, ilgilenilen öğeyi sarmak, manipülasyonlar yapmak, kaldırmak ve HTML'yi almak için yeni bir düğüm yaparsınız.

Bir dize gösteriminden hemen sonraysanız, ile devam edin new String(obj).

Güncelleme

Orijinal cevabı 2009'da yazdım. 2014'ten itibaren, çoğu büyük tarayıcı artık outerHTMLyerel bir özellik olarak destekleniyor (örneğin, Firefox ve Internet Explorer'a bakın ), böylece şunları yapabilirsiniz:

$('#item-of-interest').prop('outerHTML');

JQuery 1.6 ile bu daha zarif bir çözüm gibi görünüyor:

$('#element-of-interest').prop('outerHTML');

Yerel öğeyi almak için .get (0) öğesini kullanın ve bunun outerHTML özelliğini edinin:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);

Biraz daha spesifik olabilir misiniz? HTML'yi bir etiketin içine almaya çalışıyorsanız , bunun gibi bir şey yapabilirsiniz:

HTML snippet'i:

<p><b>This is some text</b></p>

jQuery:

var txt = $('p').html(); // Value of text is <b>This is some text</b>

Bir HTML düğümü (nesne) için hangi özelliklerin ve yöntemlerin kullanılabildiğini bulmanın en iyi yolu aşağıdaki gibi bir şey yapmaktır:

console.log($("#my-node"));

JQuery 1.6+ sürümünden, HTML etiketlerini dize çıktınıza dahil etmek için outerHTML'yi kullanabilirsiniz:

var node = $("#my-node").outerHTML;

jQuery burada, bu yüzden:

jQuery.fn.goodOLauterHTML= function() {
    return $('<a></a>').append( this.clone() ).html();
}

Tüm bu HTML öğelerini döndürün:

$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all

Bu benim için iyi çalışıyor gibi görünüyor:

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

Kabul edilen cevap metin düğümlerini kapsamaz (tanımsız yazdırılır).

Bu kod pasajı bunu çözer:

var htmlElements = $('<p><a href="http://google.com">google</a></p>↵↵<p><a href="http://bing.com">bing</a></p>'),
    htmlString = '';
    
htmlElements.each(function () {
    var element = $(this).get(0);

    if (element.nodeType === Node.ELEMENT_NODE) {
        htmlString += element.outerHTML;
    }
    else if (element.nodeType === Node.TEXT_NODE) {
        htmlString += element.nodeValue;
    }
});

alert('String html: ' + htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.Html () kullanmak için klonlamaya ve DOM'a eklemenize gerek yok, şunları yapabilirsiniz:

$('#item-of-interest').wrap('<div></div>').html()

jQuery.makeArray(obj)Yardımcı program işlevini kullanmak mümkün olabilir :

var obj = $('<p />',{'class':'className'}).html('peekaboo');
var objArr = $.makeArray(obj);
var plainText = objArr[0];

Bir HTML öğesini bir yere geçirmek ve bir öğeye geri ayrıştırmak için dizgi oluşturmak istiyorsanız, öğe için benzersiz bir sorgu oluşturmayı deneyin:

// 'e' is a circular object that can't be stringify
var e = document.getElementById('MyElement')

// now 'e_str' is a unique query for this element that can be stringify 
var e_str = e.tagName
  + ( e.id != "" ? "#" + e.id : "")
  + ( e.className != "" ? "." + e.className.replace(' ','.') : "");

//now you can stringify your element to JSON string
var e_json = JSON.stringify({
  'element': e_str
})

göre

//parse it back to an object
var obj = JSON.parse( e_json )

//finally connect the 'obj.element' varible to it's element
obj.element = document.querySelector( obj.element )

//now the 'obj.element' is the actual element and you can click it for example:
obj.element.click();

new String(myobj)

Tüm nesneyi dizeye serileştirmek istiyorsanız JSON kullanın .