createElement and appendChild

Lesson 12 of 13 in Coddy's JavaScript DOM Methods course.

The function createElement() creates a new HTML element with the specified tag name (e.g., div, p, span). For example:

const newElement = document.createElement("p");

The function appendChild() inserts a specified child element as the last child of another element. This allows you to build and modify the hierarchy of your web page's content. For example:

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

In THE above example, we create a new element p and append it inside parentElement element.

Challenge

Easy

You are given HTML code that contains unordered list with an ID myList.

Using JavaScript only, add another list item to the unordered list and add the text "Dog" to it.

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

All lessons in JavaScript DOM Methods

1Introduction

Introduction Document Object Model

2DOM Methods I

getElementById Modify Element Style getElementsByClassName Loop Through and Manipulate getElementsByTagName querySelector

3DOM Methods II

querySelectorAll addEventListener innerHTMLcreateElement and appendChildclassList toggle