Welcome aboard! In today's lesson, we are exploring the dynamic duo of JavaScript and the Document Object Model (DOM). Working in tandem with the DOM, we can manipulate and update our web pages in real-time based on user interactions.
Do you remember how some websites greet, "Good morning!" during the day and "Good night!" after sundown? This dynamic behavior is exactly what we aim to achieve using JavaScript and DOM.
To introduce JavaScript into HTML, we need the <script>
tag. Although JavaScript can be written directly inside HTML, it's often tidier to store it in separate files:
Inline <script>
tags also serve as an option:
The innerHTML
property is a powerful tool that allows us to get the content of elements or directly insert content into elements in our HTML. In the code above, we used innerHTML
to change the text content of a paragraph.
