Odpowiedzi:
Zakładam, że pytasz o pełny ciąg HTML. W takim przypadku coś takiego wystarczy:
$('<div>').append($('#item-of-interest').clone()).html();
Wyjaśniono to tutaj bardziej szczegółowo , ale zasadniczo tworzysz nowy węzeł, aby zawinąć przedmiot zainteresowania, wykonać manipulacje, usunąć go i pobrać HTML.
Jeśli szukasz reprezentacji ciągów, idź z new String(obj)
.
Oryginalną odpowiedź napisałem w 2009 r. Począwszy od 2014 r. Większość głównych przeglądarek obsługuje teraz outerHTML
jako właściwość macierzystą (patrz na przykład Firefox i Internet Explorer ), dzięki czemu możesz:
$('#item-of-interest').prop('outerHTML');
$(...)
to prawidłowy węzeł DOM.)
data
Czy możesz być trochę bardziej szczegółowy? Jeśli próbujesz umieścić HTML w tagu, możesz zrobić coś takiego:
Fragment HTML:
<p><b>This is some text</b></p>
jQuery:
var txt = $('p').html(); // Value of text is <b>This is some text</b>
Najlepszym sposobem, aby dowiedzieć się, jakie właściwości i metody są dostępne dla węzła HTML (obiektu), jest wykonanie czegoś takiego:
console.log($("#my-node"));
Z jQuery 1.6+ możesz po prostu użyć outerHTML, aby dołączyć tagi HTML do twoich danych wyjściowych:
var node = $("#my-node").outerHTML;
$('#my-node').get(0).outerHTML
jak w odpowiedzi
.outerHTML
nie działało dla mnie, ale działało .prop('outerHTML')
.
jQuery jest tutaj, więc:
jQuery.fn.goodOLauterHTML= function() {
return $('<a></a>').append( this.clone() ).html();
}
Zwróć wszystkie te rzeczy HTML:
$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all
Wydaje mi się, że to działa dobrze:
$("#id")[0].outerHTML
Akceptowana odpowiedź nie obejmuje węzłów tekstowych (niezdefiniowana jest drukowana).
Ten fragment kodu rozwiązuje to:
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>
Aby korzystać z .html (), nie trzeba klonować i dodawać do DOM, możesz:
$('#item-of-interest').wrap('<div></div>').html()
wrap()
zwraca owiniętego elementu, a nie elementu, z którym został owinięty? Powinno to dać html elementu #item-of-interest
nie będącego rodzicem div
(chyba że jQuery zmienił się od lutego 2012 r.).
Jeśli chcesz skreślić element HTML, aby go gdzieś przekazać i parsować z powrotem do elementu, spróbuj utworzyć unikalne zapytanie dla elementu:
// '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
})
niż
//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();