Image for post
Image for post

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?

The DOM or Document Object Model, is an interface for HTML and XML documents. It displays the page in a way so that programmers can use languages like Javascript to modify the style, structure, and even the content of the page; hence our topic of fake tweets. You don’t have to be an outstanding developer to access and manipulate the DOM, just follow these simple steps:

The Process

Step 1: Visit the tweet you wish to edit and right click, which gives you the menu below; select the inspect option.

Image for post

Step 2: This will bring you to the element feature within the Chrome Developer tools.

Image for post
Image for post

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.

Image for post
Image for post

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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store