Example Setup

PreviousDOM Explained NextSelecting Elements

Last updated 7 years ago

Example Setup

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

Open the 02-JavaScript-DOM-Manipulation folder in VS Code.
Go into index.html.
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.
Hit the tab button and you should see it auto-fill a blank HTML template.
Go ahead and just add a temporary Hello World in some tags inside the body.
```
<body>
 <h1>Hello World</h1>
</body>
```
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 Explained NextSelecting Elements

Last updated 7 years ago