Hello Dev Community! 👋
It is officially Day 19 of my journey to master the MERN stack! Today, I dived deeper into Lecture 6 of Apna College's JavaScript playlist with Shradha Didi, focusing on the core properties we use to read and update HTML elements dynamically.
Yesterday was about selecting elements; today was about actually changing what the user sees on the screen using JavaScript!
🧠 Key Learnings From JS Lecture 6 (DOM Properties)
I explored the basic properties that allow us to access and modify the structure and text of our HTML elements:
1. innerText vs. innerHTML vs. textContent
Understanding the difference between these three was a huge lightbulb moment today:
-
innerText: Shows or changes only the plain text content of an element, respecting the CSS styling (it won't show hidden text). -
innerHTML: Returns or changes the plain text plus any actual HTML tags inside that element. It allows us to dynamically inject new HTML tags directly from our script! -
textContent: Similar to innerText, but it shows the raw text even if it is hidden via CSS (display: none).
2. Modifying Element Properties
I practiced accessing the node properties like .tagName to see what kind of element I am working with, and using basic object manipulation to update strings dynamically.
🛠️ What I Actually Code / Practiced
I spent my practice session solving the DOM challenges at the end of Shradha Didi's lecture to lock in the concepts:
-
The "H2 Append" Challenge: Created an
<h2>element on my page with some basic text. Using JavaScript, I selected it and appended the string" from Apna College students"to the end of the existing text seamlessly. -
The "Box Class" Challenge: Created three
<div>boxes with a shared class name. UsingquerySelectorAll, I looped through them and injected a unique descriptive text (e.g., "Unique Box 1", "Unique Box 2") into each individual box dynamically using an index-based loop.
Refreshing the browser and watching the text change by itself through the script file instead of manual HTML editing felt absolutely amazing!
🎯 My Goal for Tomorrow (Day 20 / Lecture 7)
Tomorrow is a big milestone — Day 20! I will be moving to Lecture 7 of the Apna College sequence:
- Diving into DOM Manipulation (Part 2).
- Learning how to handle attributes (
getAttribute,setAttribute) and dynamically style elements using.stylein JavaScript.
💬 Let's Connect!
To the Apna College community: How did you structure your loop for the three boxes challenge today? To the seniors: In real-world projects, do you prefer using innerHTML or do you avoid it due to security (XSS) concerns?
My DOM manipulation practice scripts are committed and pushed to GitHub!
[Links in the Comments]
Keep learning, keep building! 🚀
Top comments (0)