JavaScript: Mam reprezentację DOM węzła (elementu lub dokumentu) i szukam reprezentacji ciągu. Na przykład,
var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));
powinno dać:
get_string(el) == "<p>Test</p>";
Mam silne przeczucie, że brakuje mi czegoś trywialnie prostego, ale po prostu nie znajduję metody, która działa w IE, FF, Safari i Opera. Dlatego zewnętrznyHTML nie jest opcją.
javascript
string
dom
cross-browser
element
Boldewyn
źródło
źródło
Odpowiedzi:
Możesz utworzyć tymczasowy węzeł nadrzędny i pobrać jego zawartość innerHTML:
EDYCJA: Zobacz odpowiedź poniżej na temat externalHTML. el.outerHTML powinien być wszystkim, czego potrzeba.
źródło
document.documentElement
do elementu DIV?element
przed dodaniem,tmp
ponieważ kiedy dodasz go dotmp
, zostanie usunięty zdocument
.To, czego szukasz, to „externalHTML”, ale potrzebujemy rozwiązania zastępczego, ponieważ nie jest ono zgodne ze starymi przeglądarkami.
Znajdziesz moją wtyczkę jQuery tutaj: Pobierz zewnętrzny kod HTML wybranego elementu
źródło
outerHTML
w wersji 11, po tym, jak zadałem pytanie. Więc to nie było wtedy możliwe. Zaktualizowałem nawet moje pytanie odpowiednim komentarzem, jeśli przyjrzysz się uważnie.innerHtml
innerHTML
; )outerHTML
atrybutu. Zobacz także caniuse.com/#feat=xml-serializerMyślę, że nie potrzebujesz do tego żadnego skomplikowanego skryptu. Po prostu użyj
źródło
W FF możesz użyć
XMLSerializer
obiektu do serializacji XML do łańcucha. IE udostępniaxml
właściwość węzła. Możesz więc wykonać następujące czynności:źródło
.xml
nie działa na węzłach DOM (tak jak w węzłach na bieżącej stronie). Działa tylko na węzłach dokumentów XML DOM.outerHTML
nie działa na węzłach dokumentów XML DOM. Działa tylko na węzłach DOM (jak w węzłach na bieżącej stronie). Powiedziałbym, że dobra konsystencja.Użyj elementu # externalHTML:
Może być również używany do pisania elementów DOM. Z dokumentacji Mozilli:
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
źródło
Użyj element.outerHTML, aby uzyskać pełną reprezentację elementu, w tym zewnętrzne znaczniki i atrybuty.
źródło
Jeśli twój element ma rodzica
źródło
<li>
elementu na liście.Próbować
źródło
Odkryłem, że dla moich przypadków użycia nie zawsze chcę mieć cały zewnętrzny HTML. Wiele węzłów ma po prostu zbyt wiele dzieci do pokazania.
Oto funkcja (minimalnie przetestowana w Chrome):
https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec
źródło
Zmarnowałem dużo czasu, zastanawiając się, co jest nie tak, gdy przechodzę przez DOMElements z kodem w zaakceptowanej odpowiedzi. U mnie to zadziałało, inaczej co drugi element znika z dokumentu:
źródło
document.getElementsByTagName()
, takiej jak , ta kolekcja zmieni się w połowiefor
pętli, stąd pomijanie co drugiego elementu.jeśli używasz Reaguj:
źródło
.outerHTML
nie jest specyficzne dla Reacta; jest to standard DOM. Sprawdź odpowiedź @Rich Apodaca.reactdom.findDOMNode()
... nie.outerHTML
, ale dzięki za stanowisko.