2011-12-22 13 views
15

Mam proste pytanie tutaj. Wiem z jQuery można dynamicznie dołączyć elementy HTML w DOM robiąc rzeczy jakZmiany jQuery DOM nie pojawiają się w widoku źródło

$('').append('<p>Test</p>'); 

Ale moje pytanie brzmi, dlaczego nie te elementy rzeczywiście pojawiają się wizualnie w kodzie (jeśli View Source w przeglądarce dla przykład).

Proszę ekspertów, daj mi znać, dlaczego. Dzięki

+0

Zamiast tego użyj [firebug] (http://getfirebug.com/) –

+0

Dzięki, firebug jest awesone. Dziękuję wszystkim za dobre odpowiedzi – user765368

Odpowiedz

22

Oryginalne źródło nigdy się nie zmienia. Zmienia się tylko DOM.

Możesz zobaczyć HTML wizualizację zmian DOM za pomocą narzędzi programistycznych przeglądarki.

Należy mieć świadomość, że podczas manipulowania DOM, nigdy nie manipulujesz HTML. Wizualizacja HTML oferowana przez narzędzia programistyczne to interpretacja bieżącego stanu DOM. Nie ma rzeczywistej modyfikacji znaczników HTML.

+4

+1, ale co z roobotami wyszukiwarek takich jak Google? Czy ta zawartość, którą ładuję na przykład przez ajax GET z jakiegoś rei api, jest widoczna? – andi

+0

to też jest moje pytanie? w jaki sposób? @andi –

7

Ponieważ źródło widoku wyświetla tylko kod HTML, który został pierwotnie wysłany do przeglądarki. Istnieją jednak sposoby na zobaczenie zmienionego HTML - Firebug w Firefox, narzędzia programistyczne F12 w IE lub Chrome. Wybór niektórych HTML i kliknięcie prawym przyciskiem myszy "View Selection Source" w Firefoksie również będzie działać.

4

"Źródło widoku" pokazuje tylko źródło, z którego serwer był wysyłany w chwili, gdy przeglądarka zażądała określonej strony internetowej z serwera. Dlatego, ponieważ zmiany zostały wprowadzone po stronie klienta, nie pojawiają się w "View Source", ponieważ zostały wprowadzone po dostarczeniu oryginalnej strony.

Aby wyświetlić bieżące źródło strony, możesz skorzystać z widoku Inspektora sieci w przeglądarkach Webkit lub Firebug w Firefoksie. Śledzą one wszelkie zmiany w DOM i aktualizują źródło, które można zobaczyć.

0

Czasami narzędzia programistów w IE/Firefox/Chrome nie nadążają za modelem DOM. To znaczy, że masz do czynienia z jakimś kodem godnym jedi - lub że Darth Vader zostawił go tam, żebyś debugował.

+0

Podoba Ci się kiedy? Aktualizuję zaznaczenie formularza za pomocą jquery.chosen i nie widzę oryginalnego kodu HTML zmieniającego się w devtools Chrome, ale jeśli sprawdzę element '$ ('. My-select')' w konsoli, widzę, że aktualna wartość jest dokładna ... – ptim

+0

Otrzymuję to zachowanie, gdy javascript jest dynamicznie wstrzykiwany na stronę jako część ładunku ajax. – BraveNewMath

3

W narzędziu programisty stron internetowych (dodatek do Firefoksa) dostępna jest opcja "View generated source", która umożliwia wygenerowanie całego kodu źródłowego po wprowadzeniu zmian.

view source->View generated source 
Powiązane problemy