Up to this point you have mostly worked with HTML that already exists in the page. In this topic you learn to build markup at runtime: JavaScript's document.createElement() produces a new element node that lives in memory, and you then configure it — setting textContent or innerHTML, adding attributes with setAttribute(), assigning classes or an id — before it ever appears on screen. Only when you insert the node into the document with a method such as appendChild(), insertBefore(), append(), prepend(), or insertAdjacentElement() does the browser render it.
This matters because almost every dynamic interface you will build in this course — a list that grows as users add items, a table filled from fetched data, a modal or alert generated on demand — depends on creating and placing elements precisely. Choosing the right insertion method controls where the new content lands relative to a reference element: inside at the end, inside at the start, immediately before, or immediately after. The same techniques let you assemble nested structures (for example, building an li, appending a span and a button to it, and then appending the whole li to a ul) so that a single insertion adds a complete component.
As you watch, pay attention to three things: the exact position each method produces relative to the reference element, the difference between methods that take element nodes and those that accept strings of HTML or plain text, and the fact that you must first select a target element before you can insert anything into it. Try to re-type each example yourself in a scratch page or online editor rather than only watching — insertion order is much easier to remember once you have seen it move content around on your own screen.
This tutorial walks through the DOM methods used to insert nodes into a page, covering the family of insertion techniques such as append(), prepend(), before(), after(), and replaceWith() alongside the classic appendChild() approach. The instructor codes along in a linked Repl so you can see each method change the live page as it runs. Expect side-by-side comparisons that show exactly where each method places content relative to the reference element.
It gives direct, demonstrated coverage of the core insertion subtopics — appendChild(), insertBefore()-style positioning, and the modern append()/prepend() methods — from CodeWithHarry, a widely followed instructor known for short, example-driven JavaScript lessons.
A focused follow-up lesson on the insertAdjacent family: insertAdjacentHTML(), insertAdjacentElement(), and insertAdjacentText(). It explains the four position keywords — beforebegin, afterbegin, beforeend, and afterend — and shows how each one places content around or inside a chosen reference element. The accompanying Repl lets you replay the examples yourself.
This is precisely the Modern Insertion Methods subtopic, and it clarifies the distinction between inserting an element node, raw HTML text, and plain text — a distinction students frequently confuse.
This longer lesson covers selecting elements in the DOM using getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll, and discusses the collections these methods return. It is drawn from the instructor's more recent Sigma web development course, so the examples use current syntax and style.
Insertion always requires a target, so this video supplies the prerequisite skill of locating the reference element before calling appendChild(), insertBefore(), or insertAdjacentElement().
Together these videos move you from locating nodes to generating them. The selection tutorial supports MO1 by reinforcing how the DOM tree is navigated and addressed from JavaScript, and it supplies the reference elements every insertion call depends on. The two insertion tutorials directly serve MO2, demonstrating appendChild(), insertBefore()-equivalent positioning, append()/prepend(), and the insertAdjacent methods, while their use of textContent and innerHTML when configuring new nodes touches MO3. Taken as a set, they give you the construction techniques you will combine with event handling in MO4 to build the complete, reusable interactive control required by MO5.
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.