Welcome! Today's mission is to supercharge our webpages with JavaScript! We'll master the art of creating new HTML elements, setting their attributes, and dynamically swapping the content. Are you ready? Let's dive in!
The DOM (Document Object Model) structures a webpage much like a family tree. JavaScript manipulates the DOM to transform your webpage.
HTML, XML1<!DOCTYPE html> 2<html> 3<head> 4 <title>Our Web Page</title> 5</head> 6<body> 7 <h1>Welcome to our web page!</h1> 8</body> 9</html>
Our webpage currently holds a welcome message. Let's jazz it up with JavaScript!
JavaScript is used to create new HTML elements with the document.createElement() function. Here's how we do it:
HTML, XML1<body> 2 <h1>Welcome to our web page!</h1> 3 <script> 4 let newElement = document.createElement("p"); 5 newElement.innerHTML = "This is a new paragraph."; 6 document.body.appendChild(newElement); 7 </script> 8</body>
This document.createElement("p") spells into existence a new paragraph element, currently an empty shell <p></p>. It's almost like having an actor for our play (the webpage) but without lines to say. To affix content, newElement.innerHTML = "This is a new paragraph." embeds text within our ledged element, breathing life into it as <p>This is a new paragraph.</p>.
With our new element all set to join the webpage script, document.body.appendChild(newElement), makes its grand entry. The appendChild() function, you see, is like a stagehand who ushers the new element into its spot in the webpage. The new element relaxes into its position as the last child of the parent element. Here, document.body is our parent element being the body of our webpage. The newly-birthed paragraph becomes the last child of our body element, perfectly settling into the webpage.
If in an instance, you need to append a new child to a different parent element, a div or a span, you can pluck that parent using 'document.getElementById'. And then, the new element can make its entry. For example we can use document.getElementByID('someId').appendChild(newElement); to append the new element to our existing element with ID #someId. A versatile stagehand indeed!
And there you have it! We've created, brightly lit, and stationed a new paragraph element on our webpage using JavaScript.
Attributes define HTML elements in the same way costumes define characters in a play! Let's add a blue hue to our paragraph using JavaScript:
HTML, XML1<script> 2 let newElement = document.createElement("p"); 3 newElement.innerHTML = "This is a new statement."; 4 newElement.setAttribute('style', 'color:blue'); 5 document.body.appendChild(newElement); 6</script>
Just like that, we've added a blue splash of color to our webpage using newElement.setAttribute('style', 'color:blue').
We can achieve the same result using the dot notation. Here is an example with img element:
JavaScript1let imageElement = document.createElement("img"); 2imageElement.src = 'mountains.jpg'; 3imageElement.alt = "Majestic mountain scenery"; 4document.body.appendChild(imageElement);
We already know that JavaScript can modify the content of HTML elements on the fly using the innerHTML property. But, to do that, we first have to identify the element that we want to change. We do this by using the querySelector() method.
The querySelector() method allows us to select an HTML element based on its tag name, class, or ID. It's like a "search" function for the webpage!
Let's take our webpage as an example. If we want to select the 'h1' element to change its content, we would use document.querySelector('h1').
HTML, XML1<script> 2 document.querySelector('h1').innerHTML = "Welcome to JavaScript Palace!"; 3</script>
In this code snippet, document.querySelector('h1') selects the first 'h1' element it finds on our webpage. Then, innerHTML = "Welcome to JavaScript Palace!" changes the original content to a new heading. And just like that, our webpage transforms!
And there you have it! You've learned how to control HTML elements using JavaScript, adding a dynamic quality to your webpage. Up next, a series of projects to help you flex your new skills. So, prepare yourself for some exciting challenges ahead!