WEB DEVELOPMENT

JavaScript is a powerful and versatile language that allows developers to create dynamic and interactive websites.

In my previous article, you can explore the basics of JavaScript in simple language.

You can dynamically change the content of HTML elements on a web page using JavaScript. This functionality allows developers to create interactive and responsive websites.

In this article, you'll explore 5 ways in which you can use JavaScript with HTML. This is just a small piece of a wide range of JavaScript capabilities that you'll explore in my upcoming articles — Stay Tuned!

Whether you are completely new to coding or just want to expand your skill set — This is the right place to start!

Let's get started!

JavaScript Methods to Select HTML Elements

The very basic and first requirement to work with any HTML element is to select it. Hence, JavaScript provides a method to select specific HTML elements using various techniques.

In total JavaScript offers 6 methods to select a HTML element. We will not dive deep into each of them, rather you'll learn about two widely used methods here.

A widely used method is the getElementById function, which selects the element based on its unique ID. For example, when you want to select an element whose element ID is myElement, you can simply write the below code.

let element = document.getElementById('myElement');

Note: You can use a single quote or double quote to mention element ID

Alternatively, if you would like to get all the elements in a class, you don't need to know all the element IDs. You can access all the elements in the class using another method — getElementsByClassName .

All you need to do is mention the class name in the method as shown below.

let elements = document.getElementsByClassName('myClass');

This will return a collection of all the elements available in the class — myClass. You can then select individual elements from this collection by any method of your choice such as using for loop.

Once you select an element, the next step is to update or modify it.

JavaScript Methods to Modify HTML Element Content

There are 2 ways to update HTML element content using JavaScript. Here you'll explore both.

innerHTML

This is a property of the selected element, which helps you to look into the HTML contents of the element. You can use exactly the same property to assign new HTML content to the element.

let element = document.getElementById('myElement');
element.innerHTML = '<p>My New Content</p>';

So above piece of code first selects an element with element ID myElement and then assigns the new HTML content to it using the innerHTML property on the second line.

textContent

Using this property you can look into the text contents of the element and use the same property to assign new content or update existing content to the element.

let element = document.getElementById('myElement');
element.textContent = 'My New Content';

Similar to the previous example, the above code first selects an element with element ID myElement and then assigns the new text content to it using the textContent property on the second line.

Well, the JavaScript methods are not limited to updating element contents only, rather you can update element attributes.

JavaScript Methods to Update HTML Element Attributes

Attributes of HTML elements are used to define the element's behavior, appearance, and functionality.

For example, you can use the element attribute src to specify the source of the image or any kind of media file.

JavaScript offers a versatile method setAttribute to update the attributes of an HTML element. It has extremely simple syntax as .setAttribute(name_of_attribute, value_of_attribute)

For example, suppose you would like to change the source of an image. You can do it as below.

let image = document.getElementById("myPicture");
image.setAttribute = ("src", "newimage.jpg");

So in the first line, you will access the element by its ID, and on the second line, you'll use the setAttribute property of the same element to assign a new image source.

Alternatively, you can access these attributes and update them directly using the attribute name as shown below.

let image = document.getElementById("myPicture");
image.src = "newimage.jpg";

For example, the above code changes the source of the image file contained in the element with element ID myPicture. All you need to do is specify the URL of the file.

Moreover, you can also update the style and appearance of the element using CSS classes and styles.

JavaScript Methods to Change HTML Element Style

As I mentioned in my last article, JavaScript dynamically changes the CSS style of HTML elements. This allows you to change the look and feel, such as the size, color, or position of an element.

For example, you can use the standard HTML element attribute class to assign a CSS class to the element or use the attribute style to define the inline CSS style which controls the visual appearance of the element.

You can do it using the HTML element property setAttribute or alternatively in the most straightforward way as below.

let element = document.getElementById('myElement');
element.style.color = 'pink';
element.style.fontSize = '25px';

Here you are simply accessing the element by its ID and changing its color and font size.

You can also hide or un-hide the HTML elements using the CSS attributes.

Hide and Show HTML Elements on Website using JavaScript

You need to use the sub-attribute display from the CSS style attribute to dynamically hide or show the HTML element.

This feature is useful when you want to display or hide a particular part of a web page based on user interaction or a specific condition.

Hiding an element

To hide an element, you simply need to set the display property to none to make the element disappear from the web page.

let element = document.getElementById('myElement');
element.style.display = 'none';

Showing an element

Similarly, to show hidden elements, you need to set the display property back to the default value such as block or inline.

let element = document.getElementById('myElement');
element.style.display = 'block';

Although the element is hidden, it is still part of the website, so you can access it using its ID as you can see in the above code.

Conclusion…

These are just a few, yet commonly used JavaScript techniques that are used with HTML and CSS. Through these methods, you can interact with the HTML elements using JavaScript, and update or change their properties. This altogether helps you to build dynamic, responsive, and interactive web pages.

In the upcoming articles, I'll cover multiple concepts in JavaScript — One at a time. Stay connected!

And, don't forget to FOLLOW ME and subscribe to my stories to keep up with exciting Tech-Food-Travel-related content!

Thank you for reading!