2011-12-22 16 views
15

Ho una domanda semplice qui. So che con jQuery è possibile aggiungere dinamicamente elementi HTML nel DOM facendo cose comeLe modifiche del DOM jQuery non vengono visualizzate nella sorgente della vista

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

Ma la mia domanda è, perché non questi elementi in realtà appaiono visivamente nel codice (quando si Visualizza origine nel tuo browser per esempio).

Si prega di esperti, fammi sapere perché. Grazie

+0

Usa [Firebug] (http://getfirebug.com/) invece .. –

+0

Grazie, Firebug è awesone. Grazie a tutti per le buone risposte – user765368

risposta

22

La fonte originale non cambia mai. Cambia solo il DOM.

È possibile visualizzare una visualizzazione HTML delle modifiche DOM utilizzando gli strumenti di sviluppo del browser.

Si dovrebbe essere consapevoli del fatto che quando si manipola il DOM, non si manipola mai HTML. La visualizzazione HTML offerta dagli strumenti di sviluppo è un'interpretazione dello stato corrente del DOM. Non c'è alcuna modifica effettiva del markup HTML.

+4

+1 ma per quanto riguarda i motori di ricerca come Google? Questo contenuto che, per esempio, viene caricato tramite ajax GET da alcuni resti è visibile? – andi

+0

questa è anche la mia domanda? Come? @andi –

7

Perché View Source mostra solo l'HTML che è stato originariamente inviato al browser. Ci sono modi di vedere il codice HTML modificato: Firebug in Firefox, strumenti di sviluppo F12 in IE o Chrome. Anche la selezione di HTML e il tasto destro del mouse su "Visualizza sorgente di selezione" in Firefox funzioneranno.

4

"Visualizza origine" mostra solo la sorgente che il server ha inviato al momento in cui il browser ha richiesto la specifica pagina Web dal server. Pertanto, dal momento che queste modifiche sono state apportate sul lato client, non vengono visualizzate in "Visualizza origine" perché sono state create dopo che la pagina originale è stata consegnata.

Per visualizzare la fonte in tempo reale della pagina, è possibile utilizzare la visualizzazione Web Inspector nei browser Webkit o Firebug in Firefox. Questi tengono traccia di eventuali modifiche al DOM e aggiornano la fonte che puoi vedere.

0

Ci sono momenti in cui gli strumenti di sviluppo in IE/Firefox/Chrome non tengono il passo con il DOM. Significa solo che hai a che fare con un codice degno di un jedi - o che Darth Vader l'ha lasciato lì per fare il debug.

+0

Come quando? Sto aggiornando un modulo select con jquery.chosen, e non vedo il cambio html originale in Chrome devtools, anche se controllo l'elemento '$ ('. My-select')' nella console, vedo che il il valore corrente è accurato ... – ptim

+0

Ottengo questo comportamento quando javascript viene iniettato dinamicamente nella pagina come parte di un carico utile ajax. – BraveNewMath

3

C'è un'opzione nello strumento di sviluppo web (addon di Firefox) "View generated source" che ti darà l'intero codice sorgente che viene generato dopo aver apportato le modifiche.

view source->View generated source 
Problemi correlati