I'm not clear how (jQuery?) manipulates the DOM or why.

Manipulating the DOM or Document Object Model is generally just a fancy way to say "change the static html". Once your html is loaded it is static and it doesn't change unless you manipulate the DOM with Jquery.

e.g. An online grocery checklist will start with just the html for "Add item". When clicking this button you are manipulating the DOM by adding html <li> tags onto the grocery checklist. This changes the Document Object of the entire page to be the same but with an extra list tag. Think of the DOM as a tree of Html elements which should stay the same. However Jquery allows you to change it how you see fit.

Hope this helps,

Adam

Hi, just as Adam, had mentioned, it is the way of changing the static html (index.html), answering to your question, manipulating the DOM, is changing the static html, by using jQuery only temporarily, that would not write the changes permanently, for instance see example $('button').click(function{ $('a').attr('href', 'http://github.com') }); the above example, sets the 'href' attribute of the 'a' element, equal to http://github.com, as a result of the button click event. Depending on the user interaction, we are able to add, dynamic functionality to the static page.

$('a').attr('href', 'http://github.com') //this very line is DOM manipulation, this is done without the page load.