javascript - jQuery DOM changes not appearing in view source

Question

I have a simple question here. I know with jQuery you can dynamically append HTML elements in the DOM by doing stuff like

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

But my question is, why don't these elements actually appear visually in the code (when you View Source in your browser for example).

Please experts, let me know why. Thanks

Answer 1

The original source never changes. Only the DOM changes.

You can see an HTML visualization of DOM changes using your browser's developer tools.

You should be aware that when you manipulate the DOM, you're never manipulating HTML. The HTML visualization offered by the developer tools is an interpretation of the current state of the DOM. There's no actual modification of HTML markup.