Skip to main content Accessibility Feedback
← Back to Courses & Workshops

DOM Injection and Traversal

Learn how to move through the DOM and add content with the ease.

Learn the ins-and-outs of vanilla JavaScript DOM injection and traversal in about an hour.

This guide is short, focused, and made for beginners. Get hands-on learning and grow your portfolio with a real project using DOM injection and traversal techniques.



What you’ll learn

  • How to get, set, and replace HTML.
  • How to get, set and replace text.
  • How to add, copy, and remove elements from the DOM.
  • How to reduce your risk of cross-site scripting (XSS) attacks.
  • How to traverse up, down, and sideways in the DOM.
  • How to detect when elements are in and out of the viewport.
  • How to put it all together and write a working project with DOM injection and traversal.

🧠 Multiple formats for different learning styles. Lessons include both written text and streaming HD videos (with captions). Watch or read on any device.

Loved your book, it's become a daily reference for me. Fantastic stuff!- Chris Baughman

Learn by doing with a real JavaScript project

Reinforce your learning and build your portfolio by using DOM injection and traversal techniques on a real project. Together, we’ll build an lazy loader script that loads videos into the DOM just before the enter the viewport.



Coaching

Learning web development is hard! Don't go it alone. With the Lean Web Club, you get the support you need to achieve long-term success.

Live Video Q&A

Join live video office hours every few weeks. Ask questions, share works in progress, and get help with any big roadblocks.

Private Discord Access

Get 24/7 access to a private a private Discord community where you can chat with other students, get feedback on code, and ask questions in between office hours.

Video Q&A Library

Get instant access a growing library of dozens of past Q&A sessions.

Office Hours include live automated audio transcription for people who are hearing impaired, don't speak English as their native language, or simply prefer to read.

The cheat sheet and the ability to ask questions on Slack were worth the price of the book alone.- David Buchholz

A Sample Lesson

How to inject an element before another one using the Element.before() method.


If you’re a beginner, or just looking to fill in some knowledge gaps, the Vanilla JavaScript Pocket Guides from Chris Ferdinandi are clear, informative and to the point. Cannot recommend enough!- Dino Koutrouzas

I've been stuck on the same JavaScript project for AGES, but I'm so happy because I've finally managed to finish it all thanks to Chris Ferdinandi!

I found out about him, signed up for his daily newsletter and bought his Vanilla JS Guides. I'm so glad I did because I've only worked through two of the guides and yet he's COMPLETELY changed the way I think about JavaScript.

Putting everything he's taught me into practice, I managed to rewrite the project over a weekend! He was even kind enough to personally help me on Slack with an aspect I was particularly struggling with... I SERIOUSLY recommend checking him out! 😄

- Kieran Barker
Chris’s pocket guides are great. I definitely recommend picking them up if you’re learning or interested in learning Vanilla JavaScript.- Scott Tirrell
I thank you from the bottom of my heart. If it had not been for you, I would not be able to learn JavaScript.- Patricia Parker
Wanting to learn JavaScript from scratch, make the transition from jQuery or some other library? Already pretty competent and just want to get better?

Chris Ferdinandi has got your back and his learning platform is a *tremendously good value*.- Jonathan Schofield
God, you're amazing... I'm learning so much from you.- Mojtaba Seyedi, Front End Developer
Ever wanted to ditch jQuery but not sure how? This book by Chris Ferdinandi will set you on the right path.- Jeremy Green


Not ready yet? Get daily developer tips.

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.

If you have any questions about anything, feel free to send me an email at chris@gomakethings.com.