So far in this module you have learned to find elements that already exist on the page and change their text, attributes, styles, and classes. This topic goes a step further: instead of only editing what the browser built from your HTML, you will build new nodes in JavaScript and attach them to the document yourself. That is how interactive pages add a new to-do item, render a list of search results, show a notification banner, or delete a row when a user clicks a button.
The workflow is usually the same three steps. First, create a node in memory with document.createElement() (or clone an existing one with cloneNode()). Second, give it content and configuration by setting textContent, innerHTML, or attributes such as id, class, and src. Third, attach it to the tree with appendChild(), append(), insertBefore(), or insertAdjacentElement(), depending on exactly where it must land. Removal and swapping follow the same logic in reverse, using removeChild(), the simpler element.remove(), and replaceChild() or replaceWith().
While watching the videos, pay attention to two things. First, notice that a created element does nothing visible until it is inserted into the document — forgetting that insertion step is the most common beginner bug. Second, watch the difference between the older parent-based methods (parent.appendChild(child), parent.removeChild(child), parent.replaceChild(new, old)) and the newer child-based ones (append(), remove(), replaceWith()), and note which ones accept text strings and multiple arguments. Also keep an eye on when innerHTML is a convenient shortcut and when it is risky compared with building nodes explicitly.
This episode of a full JavaScript course focuses on taking elements back out of the DOM, so expect coverage of the remove() method on an element and the older parent.removeChild() approach. Based on the title and its place in a long DOM-focused series, it should walk through selecting the target node first, then detaching it, with live code examples. The linked course repository gives you the sample files to follow along.
It targets the removal subtopics directly and at a slower, lesson-length pace, which is useful because remove() versus removeChild() is the pair students most often confuse.
This tutorial explains innerHTML, outerHTML, and related content properties such as textContent and innerText, showing what each one reads and writes on an element. It demonstrates how assigning to these properties replaces the markup or text inside a node, which is the quickest way to put content into an element you have just created. Code is demonstrated in a Replit workspace you can open yourself.
It supports the "setting content on new nodes" subtopic and clarifies the trade-off between injecting HTML strings and setting plain text, which you need before deciding whether to build nodes with createElement() or write markup directly.
This lesson covers DOM traversal: moving from an element to its children, its parent, and its siblings using properties such as children, parentElement, nextSibling, and previousElementSibling. It explains how nodes relate to one another inside the document tree and how to reach a neighbouring element from one you already have. The examples are coded live as part of a structured web development course.
Insertion and removal methods are parent-and-child operations, so knowing how to reach a parent or a sibling reference is a prerequisite for using appendChild(), insertBefore(), and removeChild() correctly.
Together these videos carry the practical half of MO5: the removal lesson demonstrates remove() and removeChild() on real elements, the innerHTML lesson shows how to load content into nodes once they exist, and the traversal lesson supplies the parent and sibling references that appendChild(), insertBefore(), and replaceChild() require. They also reinforce MO1 by showing the document as a navigable tree of parent, child, and sibling nodes, and MO4 by comparing the content-setting properties used on both existing and newly created elements. Use the module readings and practice exercises to fill in the methods the videos touch only briefly, such as createElement(), append(), insertAdjacentElement(), cloneNode(), and replaceWith().
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.