beginner
10 min read
Build a Click Counter
There's a moment in learning JavaScript when things stop being abstract. You've studied variables and functions. You've followed along with examples. But…
Read tutorialconcept
DOM Manipulation
Selecting, reading, creating, removing, or updating document elements and their content or presentation with JavaScript.
Tagged articles
DOM Manipulation articles
27 articles in this tag.
beginner
16 min read
Build a Digital Clock with JavaScript
There is a small magic moment in every beginner programmer's life: the first time a page changes itself, with no click, no refresh, no input from you. The…
Read tutorial
beginner
13 min read
Build a JavaScript Quiz App
You've learned arrays, conditionals, click events, and DOM updates as separate lessons. Now it's time to see them work together. A quiz app is the perfect…
Read tutorial
beginner
16 min read
Build a Modal Dialog with JavaScript
You have definitely seen a modal before. You clicked a button on a website, and a small window appeared on top of the page. Everything behind it went dark.…
Read tutorial
beginner
14 min read
Build a Number Guessing Game
You've clicked buttons. You've added items to a list. Now it's time to make JavaScript think.
Read tutorial
beginner
14 min read
Build a Searchable List with JavaScript
Every product you use has one: a search box that narrows a list as you type. Contact lists, product catalogs, dashboards, admin panels—they all use the…
Read tutorial
beginner
12 min read
Build a Simple Calculator
A calculator is not smart. It just remembers two numbers and one operator between clicks. Once you see that, the whole project becomes simple—and you will…
Read tutorial
beginner
14 min read
Build an Image Slider with JavaScript
An image slider looks like a piece of fancy UI magic. Underneath, it is just a number moving through an array and telling the page which image to show.…
Read tutorial
beginner
8 min read
Changing DOM Content
A static page is a finished product. A dynamic page is a conversation: the user clicks, submits, or types, and the page answers. That answer usually means…
Read tutorial
beginner
10 min read
Create a Random Quote Generator
Click a button. Watch the page change. That small moment—where your JavaScript stops just running and starts doing something visible—is the bridge between…
Read tutorial
beginner
8 min read
Creating and Removing Elements
A static HTML page is frozen the moment it loads. Real sites keep changing after that—a to-do item appears, a cart entry disappears, a new message slides…
Read tutorial
intermediate
9 min read
Event Delegation in JavaScript with a Clickable List
You built a list. You wired every item with a click listener. It worked. Then you added one new item, clicked it, and nothing happened. The old approach…
Read tutorial
beginner
9 min read
Fetch Data in the Browser with Loading, Success, and Error States
You click a button, the page freezes for two seconds, and then either fills in with data or stays empty forever. The code might be fine. The problem is…
Read tutorial
beginner
8 min read
Fix "Cannot Read Properties of null" in JavaScript
If you are new to JavaScript, this message can look like the browser is speaking a different language. It is not. It is telling you something simple: your…
Read tutorial
beginner
9 min read
Handle Form Submissions with JavaScript
You fill out a form, hit submit, and the whole page jumps. Everything you typed is gone. The browser did what forms do by default: it sent the data and…
Read tutorial
beginner
7 min read
Handling Click Events
You have a button on your page. You want something to happen when someone clicks it. That moment—when a static page starts responding—is where JavaScript…
Read tutorial
beginner
8 min read
Using JavaScript in HTML Pages
A web page is three layers doing one job. HTML builds the structure, CSS styles it, and JavaScript makes it respond. This tutorial shows you how to add…
Read tutorial
beginner
12 min read
Make a Simple To-Do List
A to-do list is the first app where your page stops being a static document and starts remembering what the user does. Same event-listening idea as a click…
Read tutorial
beginner
8 min read
Modifying CSS with JavaScript
You already know how to select an element and change what it says. Now let's make it change what it looks like.
Read tutorial
beginner
10 min read
Practical DOM Examples
You have learned how to select elements, change their content, update their styles, and create new elements from scratch. Each of those skills makes sense…
Read tutorial
beginner
10 min read
JavaScript DOM Manipulation Practice Exercises
You have read about getElementById, textContent, createElement, and remove(). You understand what they do on paper. But understanding a method and feeling…
Read tutorial
beginner
8 min read
Render an Array as a List in the DOM
You have an array of names sitting in your JavaScript file. You want those names to show up as bullet points on the page. The naive approach is to write…
Read tutorial
beginner
10 min read
Selecting DOM Elements
You cannot change an element you cannot reach. Every update, style change, and click response on a web page starts with one act of finding. JavaScript…
Read tutorial
beginner
8 min read
textContent vs innerHTML in JavaScript
textContent treats your value as plain text. innerHTML treats it as HTML markup. Same string, two different outcomes—and one of them needs extra care when…
Read tutorial
beginner
11 min read
Toggle CSS Classes with JavaScript
You have a button. You have a menu. You want the button to hide the menu, and you want it to show the menu again when clicked a second time. If your first…
Read tutorial
beginner
7 min read
What is the DOM?
Your HTML file is just text. It sits on disk, perfectly still, until a browser reads it. Yet the page you're looking at right now can change—text updates,…
Read tutorial
beginner
8 min read
Work with Multiple DOM Elements in JavaScript
You learned to select one button and make it respond to a click. Then your page grew five buttons that all need the same behavior—and your trusty…
Read tutorial