JS set attribute

JS set attribute#

JavaScript provides a method to dynamically set or change HTML attributes of an element. The setAttribute() method can be used to modify the value of an attribute of an HTML element, such as the src attribute of an image tag or the href attribute of an anchor tag.

Syntax#

element.setAttribute(attributeName, attributeValue);

The setAttribute() method takes two parameters:

• attributeName: the name of the attribute to set
• attributeValue: the value to set the attribute to

For example, to change the source attribute of an image element with an id of "myImage", you can use:

document.getElementById("myImage").setAttribute("src", "new-image.jpg");

In this code, we are using the getElementById() method to get the element with the id of "myImage", and then using setAttribute() to change its src attribute to "new-image.jpg".

There are also other ways to set attributes in JavaScript, such as by directly changing the property of an element, or by using jQuery. However, using setAttribute() is a more flexible and versatile method that can be used for any HTML attribute.

Here's an example of setting multiple attributes at once:

var link = document.createElement("a");
link.setAttribute("href", "https://www.example.com");
link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener");

In this code, we are creating a new anchor element, and then setting its href, target, and rel attributes using setAttribute().

Overall, the setAttribute() method is a useful tool for dynamically modifying HTML attributes of elements in JavaScript.