Have you ever wondered how people make those fake celebrity tweets you see all over the internet? I know I have. I always imagined you had to be a photoshop magician of sorts but it turns out, you don’t. With a little but of HTML knowledge and DOM manipulation, the world of memes can be at your finger tips. I recently began learning the nuances of manipulating the DOM, so I thought I would share the interesting and fun concept of creating fake tweets.
What is the DOM?
Step 1: Visit the tweet you wish to edit and right click, which gives you the menu below; select the inspect option.
Step 2: This will bring you to the element feature within the Chrome Developer tools.
This feature lets you inspect all of the HTML elements on the page. You can navigate this page to find all of the content you wish to change. In this case we can see the content were aiming to edit(the tweet)lies within a <span> tag .
Step 3: Edit the desired text by double clicking on it within the <span> tag. You can now delete the previous tweet characters and replace it as I did below, and hit enter. As you can see the tweet now reads what I entered inside the <span>(obviously LeBron James would never say that). Thats it, you’ve done it! Now you’ve got a little trick you can show your friends to make you look cool and “tech-y” :)
Now not to worry, we are are not actually hacking LeBron James’ twitter account and changing his tweets. This edit only exists on our page; just for fun. You can perform lots of interesting things manipulating the DOM, not just editing silly tweets.
Look at that! Just from the DOM you can change the entire background color of twitter. You could build off this small tutorial and build out an entirely new look for twitter if you wish, but don’t take my word for it, give it a shot yourself! Become a Mass Manipulator of the DOM!