How to change an element's id attribute using jQuery


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.

Level up your programming skills

I'm sending out an occasional email 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.