Show Me Your ID

Today, I want to discuss interacting with your HTML content. Many times in JavaScript programming, we wish to interact/affect our HTML content in some fashion. We may want to add, remove or change content. So how do we go about doing that? TO accomplish this, we need to set up our HTML correctly and then code our JavaScript for our HTML. Let’s look at how we might do that…

In HTML, we need to ensure we set up our structure of our content appropriately. One aspect of this is utilizing the ID attribute. WHen I build web apps, I usually ID and class (which we will talk about in a future post) a ton of stuff. This allows me to utilize not only proper JavaScript coding, but also CSS to make  my apps ‘prettified’. So what does this ID attribute look like?

[code lang=”html”]
<div id="myDiv">
Some content…

As you can see, I have an ID attribute on my div entitled, ‘myDiv’. We can put IDs on virtually any HTML tag. The only real rule is that each ID needs to be unique on a page. In other words, I cannot have two ‘myDiv’ IDs on the same HTML page.

So how does this work with JavaScript? We, we can grab that tag element by the ID and do what we want with it. We do this by using the getElementById() method. Here’s an example…

[code lang=”js”]
// Create variable to hold myDiv div
var myVar;
// Grab myDiv and put it into myVar
myVar = document.getElementById("myDiv");

What the above code does is grab the myDiv div and stick it into the myVar variable. Another way of reading line four (4) is to say, “Go into my document, get the element with the ID of myDiv.” All we need to do is pass the ID we want to grab to the getElementById() method. So what good does this do us? Now that we have it sitting in a variable, we can manipulate the content using that variable as a vehicle. As I stated earlier, we can add/change/delete content. In JavaScript coding, you will find that you will use this method very often.

Happy Coding!

Clay Hess


More To Explore


Exploring the Broadcast Channel API: Inter-Tab Communication

Intercommunication between different contexts (like tabs, iframes or workers) of the same origin has often been a challenge. With the Broadcast Channel API, developers now have a powerful tool to easily communicate between browsing contexts. In this blog post, we’ll dive deep into the capabilities of the Broadcast Channel API, exploring its features, use cases, and how it can be effectively implemented in your projects.

computer, laptop, work place-2982270.jpg

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

Share This Post


Need help?

Let's have a chat...


Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 


Begin Your Learning Journey Today!

Come back inside to continue your learning journey.