Podcast Episode 2: Update DOM Element Content
Season 1: One-Liner JavaScript Coding Challenge for Frontend Engineers
One-Liner Buddhist Quote of Week
There are only two mistakes one can make along the road to truth: not going all the way, and not starting.
— Buddha
If you’re looking for A Complete Frontend Developer Course for Beginners, check out this textbook written by Thon Ly exclusively for Medium:
To help you achieve full mastery, all three web languages (HTML, CSS, and JavaScript) are taught together in parallel within a musical context in order to deepen your understanding of their interrelationships in a fun and memorable way!
← Episode 1: Style a DOM Element
Transcript for Podcast Episode 2
ATTN Coding Ninjas: Can you update the content of a DOM element using only one line of JavaScript code? Come sharpen your coding chops in this episode!
If you know a clever one-line solution to this week’s coding challenge, please use the link below to record your answer. And if you can speak slowly and clearly, I may feature your voice in my next episode! But if it’s more convenient for you, you may use the Comment section of Medium or YouTube.
Intro
Hello World! My name is Thon Ly (tawn lee) and I am your host. Each week, I send out a Frontend Coding Challenge that can be solved with just one line of JavaScript code. The following week, I review the best answers that were sent in. If you think you’re a Coding Ninja, come test your coding chops!
Problem
Last week, this one-liner Frontend Challenge was presented:
<p id="p1">Hello World</p>In the HTML code, there is a paragraph tag with an ID of p1. The content of this tag is Hello World.
Level Easy:
Your challenge is to replace the text Hello World with the text Frontend Rocks! in only one line of JavaScript code.
Level Medium:
Can you think of another way that’s even faster and more performant?
Solution
The most common answer submitted was:
p1.innerHTML = “Frontend Rocks!”If you don’t know why we can use the variable p1, please check out our last episode.
innerHTML is a quick and convenient way to insert text inside an element. However, innerHTML also tries to parse and convert the text into DOM elements. This extra step can be a huge cost performance.
The best answer is this:
p1.textContent = “Frontend Rocks!”Since the text we want to insert is just plain text, it is much more performant to use textContent, which simply updates the textNode property.
References:
- https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
- https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
Show Notes
Thanks so much for tuning in! I hope you learned something new today! By the way, in the show notes, there are links to the CodePen with all the problems and all the solutions:
As well as a YouTube recording of this episode:
Next Problem
For this week, your one-liner Frontend Challenge is this:
<p id="p1">Hello World</p>In the HTML code, there is a paragraph tag with an ID of p1. The content of this tag is Hello World.
Level Hard:
Your challenge is to add a hover effect to this paragraph tag such that on hover the text color changes to green. Do this in only one line of JavaScript code.
Outro
If you know the answer to this challenge, I invite you to please call in and leave a voice message to share your knowledge with your fellow coders.
And if you can think of a great one-liner Frontend Challenge to recommend for this show, please let me know also, and I might just air it!
Lastly, if you find this show helpful, please leave a positive review to help increase its search visibility. Thanks so much!
For more coding exercises, check out:
When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️
