Modifying DOM Elements

Once you have accessed an element, you can modify its content, attributes, or styles.

Changing Text Content

You can change the text content of an element using the textContent property.

element.textContent = "New Text Content";

Changing HTML Content

To modify the HTML content of an element, use the innerHTML property.

element.innerHTML = "<strong>New</strong> HTML Content";

Modifying Attributes

You can change element attributes using the setAttribute method.

element.setAttribute("src", "new-image.jpg");

Modifying Styles

To change the styles of an element, access its style property and modify specific style properties.

element.style.backgroundColor = "red";
element.style.color = "white";

Continuing the tribute page example, let’s try to customize the HTML elements.

Task

Change the text content of the heading to About Infosys Limited and change the text color to blue.
Set the src attribute of the image element to https://www.learnwebstack.com/wp-content/uploads/2023/10/infosys-founders.jpg and set the width to 350px.
Change the font style italic to the second paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn JavaScript - LearnWebstack.com</title>
</head>
<body data-rsssl=1 id="body">
    <h1 id="heading">Infosys</h1>
    <img id="img" alt="The Infosys Founders"><br>
    <p class="para">Infosys Limited, a multinational information technology company from India, provides services such as business consulting, information technology, and outsourcing. The company was founded in Pune and is headquartered in Bangalore. Infosys is the second-largest Indian IT company, behind Tata Consultancy Services, according to 2020 revenue figures.</p>
    <p class="para">Infosys reached US$100 billion in market capitalization as the fourth Indian company to do so on August 24, 2021.</p>
    <p class="para">Services Offered:</p>
    <ul id="list">
        <li>Digital Commerce</li>
    </ul>
    <a href="https://www.infosys.com/">Learn More</a>
    <script>
        let heading = document.getElementById("heading");
        let image = document.querySelector("#img");
        let paras = document.getElementsByClassName("para");
        
        /* Add the code below */
        
        paras[0].style.fontStyle = "italic";
        /* Add the code above */
    </script>
</body>
</html>

Modifying DOM Elements

Add LearnWebstack.com to your Homescreen!