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.

Take your skills to the next level ⚡️

I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.