ele.setAttribute vs ele.attribute

When you're working with JavaScript and need to set attributes of an element, there are two main ways to get the job done. The first way is to use the `setAttribute` method, which lets you pass in the attribute name and value as arguments. The second way is to use dot notation and set the attribute directly on the object.

Here's an example of both approaches being used to set the `id` attribute:

ele.setAttribute('id', 'myButton');

// Or
ele.id = 'myButton';

Even though both methods will ultimately get you to the same result, there are some important differences between them. In this post, we'll explore those differences and figure out which approach is the best fit for your needs.

Let's talk about the differences between using `setAttribute` and dot notation in JavaScript to set HTML attributes.

Firstly, `setAttribute` allows for dynamic attribute names and values to be passed in as strings at runtime. This can be especially helpful when you need to generate attributes based on user input or other variables.

On the other hand, dot notation provides easier access to commonly used attributes like `className` and `id`. It often leads to cleaner and more concise code than using `setAttribute`.

Keep in mind that some HTML attributes may have slightly different names in JavaScript. For example, the HTML `for` attribute is represented as `htmlFor` in JavaScript, and the `class` attribute is represented as `className`.

Here's a sample code:

ele.setAttribute('class', 'button button--primary');

// Or
ele.className = 'button button--primary';

While using dot notation is usually cleaner and more concise, there are times when using `setAttribute` is a better choice.

One of those times is when you're working with custom data attributes. These are attributes that start with `data-` and can hold custom data specific to the page or application. Because they're not standard HTML attributes, you can't set them using dot notation. You have to use `setAttribute`.

Another time when `setAttribute` is preferable is when working with SVG elements. Unlike HTML elements, SVG elements have their own set of attributes that you can't access with dot notation. In this case, you'll need to use `setAttribute` to set the attribute you want.

Lastly, if you need to create an attribute name or value based on user input or variables at runtime, `setAttribute` is probably your best option because it lets you use string interpolation.