Example Setup

Let's start to add some HTML and JavaScript that would allow us to manipulate the DOM. Follow these steps:

  1. Open the 02-JavaScript-DOM-Manipulation folder in VS Code.

  2. Go into index.html.

  3. Let's create the code for a basic HTML page. Remember the VS Code shortcut to create an HTML template: enter a single exclamation point and you should see the auto-complete option popup.

    Exclamation

  4. Hit the tab button and you should see it auto-fill a blank HTML template.

    Template

  5. Go ahead and just add a temporary Hello World in some tags inside the body.

    <body>
 <h1>Hello World</h1>
</body>

  6. Run the app and make sure you can see it in the browser.

Adding the JavaScript

Instead of creating a separate JavaScript file, let's include it directly in the index.html file. Replicate the following layout in your file:

</head>
<body>
    <!-- All of our HTML code will go here -->
    <h1>Hello World</h1>

    <script type="text/javascript">
        /* All of our JavaScript code will go here */
        var x = 10;
        console.log(x);
    </script>
</body>
</html>

Test

Run the app again after adding the code above. When you run the app, you should see 10 in the console.

PreviousDOM ExplainedNextSelecting Elements

Last updated