How to change an element's id attribute using jQuery

A guide on changing an element's id using jQuery

Posted on May 15, 2021


To change the id attribute of an HTML element, you can use the jQuery attr() method which allows you to set an element’s attribute value.

The syntax of attr() method is as follows:

Element.attr("attributeName", "attributeValue");

In the following example, the <h1> element with id value of myId will be replaced with newId:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1 id="myId">jQuery change ID value</h1>
  <script>
    $("#myId").attr("id", "newId");
  </script>
</body>

You can change any HTML element id attribute value by using the example above as a reference.

Related articles:

Level up your programming skills

I'm sending out an email once every Wednesday with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.