Why View source of the page is different than Inspecting the element of the page [closed]

Question

Okay I'm using Producteev.com frequently on my projects, the other day I noticed that on my workspace page, that the source of the page (Ctrl+U) is quite short and most of the page's items are not in the view source code.

but of course if you inspect the elements of the page you see the actual codes.

I'm not sure if this is the right place to ask such question but I'd like to know why is this happening and using what technology maybe? and also why they do use such techniques?

Answer 1

Viewing the source shows the source code.

Inspecting the DOM shows you a serialisation of the current state of the DOM after the HTML has been parsed, error corrected, normalised and (possibly) manipulated with JavaScript.

Answer 2

DOM elements that have been added dynamically after the page is generated will not be included in the page source.