React Foundations: Updating UI with Javascript | Next.js

nextjs.org · 782 words · saved by 1 readers

In this chapter, we'll start building out our project by using JavaScript and DOM methods to add an h1 tag to your project. Open your code editor and create a new index.html file. Inside the HTML file, add the following code: Then give the div a unique id so that you can target it later. To write JavaScript inside your HTML file, add a script tag: Now, inside the script tag, you can use a DOM method, getElementById() , to select the element by its id: You can continue using DOM methods to create a new element: To make sure everything is working, open your HTML file inside your browser of choice. You should see an h1 tag that says, 'Develop. Preview. Ship.'. If you look at the DOM elements inside your browser developer tools , you will notice the DOM includes the element. The DOM of the page is different from the source code - or in other words, the original HTML file you created. This is because the HTML represents the initial page content, whereas the DOM represents th

3 Chapter 3 Updating UI with Javascript In this chapter, we'll start building out our project by using JavaScript and DOM methods to add an h1 tag to your project. Open your code editor and create a new index.html file. Inside the HTML file, add the following code: index.html < html > < body > < div ></ div > </ body > </ html > Then give the div a unique id so that you can target it later. index.html < html > < body > < div id = "app" ></ div > </ body > </ html > To write JavaScript inside your HTML file, add a script tag: index.html < html > < body > < div id = "app" ></ div > < script type

React Foundations: Updating UI with Javascript | Next.js

related reading