Inserting Elements into the DOM & Higher Order Functions

March 06, 2019

Today's Practical JavaScript lessons covered inserting elements into the DOM and higher order functions. I barely remembered some of these methods so it was a great refresher.

Notes:

document.createElement([tagname])creates a HTML element

document.querySelector([selector])selects the first DOM element that matches the selector

.appendChild([childElement])inserts a child element into the specified element

Element.innerHTMLgets all the inner HTML of the element (it can also be reassigned)

Element.textContentallows you to get / set the text content of the element

While following along with the lessons today, I couldn't get my program working correctly. Rather than getting frustrated and struggling to figure out what I did wrong, I applied yesterday's lesson (on the debugger). With the help of the debugger, I quickly found out it was due to a typo, fixed it, and carried on.

Higher order functions:

  • Functions that accept other functions
  • Enhance the behavior of other functions

Callback functions:

  • The functions that are passed into higher order functions

A couple of examples of higher order functions:
setTimeout([callbackFunction], [# of ms])

Array.forEach([callbackFunction])

Tip: When inspecting an element in chrome, you can reference the selected HTML element with $0 in the console.

84% done with PJS now!

← back to all posts