2011-12-22 11 views
15

Tengo una pregunta simple aquí. Sé que con jQuery puede añadir dinámicamente elementos HTML en el DOM haciendo cosas por el estilojQuery DOM cambios que no aparecen en la fuente de la vista

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

Pero mi pregunta es, ¿por qué no estos elementos que aparecen actualmente en el código visual (cuando Ver código fuente en su navegador para ejemplo).

Por favor, expertos, déjenme saber por qué. Gracias

+0

Utilice [firebug] (http://getfirebug.com/) en lugar .. Gracias –

+0

, Firebug es impresionante, increíble. Gracias a todos por las buenas respuestas – user765368

Respuesta

22

La fuente original nunca cambia. Solo el DOM cambia.

Puede ver una visualización HTML de los cambios DOM a través de las herramientas de desarrollo de su navegador.

Debe tener en cuenta que cuando manipula el DOM, nunca manipula HTML. La visualización HTML ofrecida por las herramientas de desarrollador es una interpretación del estado actual del DOM. No hay una modificación real del marcado HTML.

+4

+1 pero ¿qué hay de los roobots de motores de búsqueda como Google? ¿Es visible este contenido que, por ejemplo, cargué a través de ajax GET de algún api de reposo? – andi

+0

esta es mi pregunta también? ¿cómo? @andi –

7

Porque Ver origen solo muestra el HTML que se envió originalmente al navegador. Sin embargo, hay formas de ver el cambio de código HTML: Firebug en Firefox, las herramientas de desarrollador F12 en IE o Chrome. Seleccionar algo de HTML y hacer clic derecho en "Ver fuente de selección" en Firefox también funcionará.

4

La "fuente de visualización" solo muestra la fuente que el servidor envió en el momento en que el navegador solicitó la página web particular desde el servidor. Por lo tanto, dado que estos cambios se realizaron en el lado del cliente, no aparecen en "Ver origen" porque se han creado después de que se entregó la página original.

Para ver la fuente en vivo de la página, puede usar la vista del Inspector web en los navegadores webkit, o Firebug en Firefox. Estos hacen un seguimiento de los cambios al DOM y actualizan la fuente que puede ver.

0

Hay momentos en que las herramientas de desarrollo en IE/Firefox/Chrome no se mantienen al día con su DOM. Eso solo significa que estás tratando con un código digno de un Jedi, o que Darth Vader lo dejó allí para que lo depuraras.

+0

¿Cuándo? Estoy actualizando un formulario seleccionado con jquery.chosen, y no veo el html original cambiando en Chrome devtools, aunque si inspecciono el elemento '$ ('. My-select')' en la consola, veo que el el valor actual es preciso ... – ptim

+0

Aparece este comportamiento cuando JavaScript se inyecta dinámicamente en la página como parte de una carga útil de AJAX. – BraveNewMath

3

Hay una opción en la herramienta de desarrollador web (complemento de Firefox) "View generated source" que le dará el código fuente completo que se genera después de realizar los cambios.

view source->View generated source 
Cuestiones relacionadas