Creating and Appending Elements

JavaScript allows you to create new elements and append them to the document.

Creating Elements

You can create new elements using the createElement method.

let newElement = document.createElement("div");

Appending Elements

To add a new element to the document, use methods like appendChild, insertBefore, or insertAdjacentElement.

parentElement.appendChild(newElement);

Continuing the tribute page example, let’s try to add some list HTML elements using JavaScript.

Task

Add the values in the array otherServices as list items for the list with the id list using the for loop.

<!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");
        
        heading.textContent = "About Infosys Limited";
        heading.style.color = "blue";
        image.setAttribute("src", "https://learnwith.tumkurlab.com/wp-content/uploads/2023/10/infosys-founders.jpg");
        image.style.width = "350px";
        paras[1].style.fontStyle = "italic";
        
        let otherServices = ["Metaverse Foundry","Generative AI", "Blockchain", "and more"];
        /* Add the code below */
        
        /* Add the code above */
    </script>
</body>
</html>

Creating and Appending Elements

Add LearnWebstack.com to your Homescreen!