Take that React, Angular, Vue, and whatever hot new framework I failed to mention!
To follow along at home, all you need is a web browser and a page to manipulate.
To make it easy, we can load up any web page, open up our browser’s console and override it with our own HTML document:
document.getElementsByTagName('body').innerHTML = '<div id="gator">Alligators rule!!</div>';
Once you hit enter, the existing page will be completely replaced with a light amount of HTML and a universal truth about everybody’s favorite reptile.
— Sorry to interrupt this program! 📺
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your front-end skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
All right, so in the getting started section, we sorta jumped the gun and already used
innerHTML to manipulate some elements on the page.
To back it up a small bit, let’s start by changing the text of an element on a page. To do so, we’ll need to select our element and then use
innerText to set the content:
document.getElementById('gator').innerText = 'OF COURSE alligators rule!';
Not much to it!
If you wanted to prepend text to an existing string of text, you can use
innerText to get the current text and then prepend to it:
const currentText = document.getElementById('gator').innerText; const nextText = 'Do alligators rule? ' + currentText; document.getElementById('gator').innerText = nextText;
Appending text is even easier, since we can use
document.getElementById('gator').innerText += ' This definitely true.';
This is all well and good, but the moment we try to introduce HTML, like wrapping the string in
<strong>, things fall apart.
innerText works with the text contents of an element, things like HTML tags end up being shown, as if the
> were encoded as
No big deal though, when we want to use additional mark up with our string, all we need to do is swap out
innerHTML and be on our way:
document.getElementById('gator').innerHTML = '<strong>OF COURSE</strong> alligators rule!';
And just like
innerHTML we can capture the value to prepend to it, and use
+= to append to it:
const currentHTML = document.getElementById('gator').innerHTML; const nextHTML = 'Do alligators rule? ' + currentHTML; document.getElementById('gator').innerHTML = nextHTML; document.getElementById('gator').innerHTML += ' This definitely true.';
That’s not all, when using
innerHTML we can do more than just edit the text of an element. We can also use it to add additional markup, like in the case of an HTML table:
document.getElementById('gator').innerHTML = ` <table border="1"> <thead> <tr> <th>Reptile</th> <th>Awesomeness</th> </tr> </thead> <tbody id="tableRows"> <tr> <td>Alligator</td> <td>9001</td> </tr> </tbody> </table> `;
Subsequently, we can use
innerHTML to append new rows to the table on the fly:
document.getElementById('tableRows').innerHTML += ` <tr> <td>Snake</td> <td>-1</td> </tr> `;
innerHTML doesn’t come close to the power of a front-end framework that’s leveraging a virtual DOM, but hey, it gets the job done.
Fortunately, the days are long gone when