Modifying Content and Styles of Elements
Welcome to the third lesson of Module 3! In this stage, you will explore the power of dynamically modifying the content and styles of HTML elements with JavaScript, opening up a world of possibilities to customize interfaces and create more engaging and interactive user experiences.
Modifying the Content of Elements
By using the innerHTML property, we can replace the internal content of an element.
For example, we can change the text of a paragraph or add a list of items.
The textContent method allows us to change the visible text of an element without processing HTML tags. This is useful when we want to modify only the text inside an element.
// Changing the text of a paragraph
const paragraph = document.getElementById('myParagraph');
paragraph.innerHTML = 'New paragraph text';
// Changing the text of an element without processing HTML tags
const heading = document.querySelector('h1');
heading.textContent = 'Modified Title';
Adding and Removing Elements
We can create HTML elements using the createElement method and add them to the document using the appendChild method. This is useful for dynamically creating new elements in response to user actions or events. The removeChild method allows us to remove a specific element from the DOM. This is useful when we want to eliminate an existing element from the page.
// Creating a new element and adding it to the end of an existing element
const list = document.getElementById('myList');
const newItem = document.createElement('li');
newItem.textContent = 'New list item';
list.appendChild(newItem);
// Removing a specific element from the DOM
const elementToRemove = document.getElementById('myElement');
elementToRemove.parentNode.removeChild(elementToRemove);
Modifying Styles of Elements
We can access and modify the style properties of an element using the style property. For example, we can change the background color, font, or size of an element.
To add or remove CSS classes from an element, we can use the className property. This allows us to apply predefined styles to an element.
Additionally, the classList property offers methods to manipulate CSS classes more advancedly, such as adding, removing, or checking the presence of a class.
// Changing the background style of an element
const box = document.getElementById('myBox');
box.style.backgroundColor = 'red';
// Adding a CSS class to an element
const button = document.getElementById('myButton');
button.className = 'primary-button';
// Adding a CSS class to an element using classList
const box = document.getElementById('myBox');
box.classList.add('highlight');
By mastering these concepts, you will be able to dynamically and interactively manipulate the content and styles of HTML elements in your JavaScript applications.
Challenge:
- Create a JavaScript script that creates a “div” element on the web page.
- Add text to the “div.”
- Create a button that, when clicked, changes the color of the “div” and its position on the screen.
Now that you’ve learned how to modify the content and styles of elements, it’s time to bring interactive life to your JavaScript code.
In the next lesson, we will explore how to manipulate user events.
