For example, we have an HTML tag:

<div class="box">This is a box</div>

We are using the div tag class name box and add an id="box" in the same div tag. The output is:

<div id="box" class="box">This is a box</div>

We can achieve the changes with the code below for a single tag:

document.getElementsByTagName("div")["class", "box"].setAttribute("id", "box")

But if we don't know or we have multiple classes in the HTML element, how to add id to all the tags?

Example:

<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Output should be like below:

<div id="box">Hello World</div>
<div id="box--red">Hello World</div>
<div id="box--blue">Hello World</div>
<div id="box--green">Hello World</div>

For example, we have an HTML tag:

<div class="box">This is a box</div>

We are using the div tag class name box and add an id="box" in the same div tag. The output is:

<div id="box" class="box">This is a box</div>

We can achieve the changes with the code below for a single tag:

document.getElementsByTagName("div")["class", "box"].setAttribute("id", "box")

But if we don't know or we have multiple classes in the HTML element, how to add id to all the tags?

Example:

<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Output should be like below:

<div id="box">Hello World</div>
<div id="box--red">Hello World</div>
<div id="box--blue">Hello World</div>
<div id="box--green">Hello World</div>

• javascript
• jquery
• html
• dom

• So, you shouldn't be trying to make more the one item have the same id - that's going to cause bad things to happen later. Use id when there will be one and only one thing with that id on the page. – Matthew Herbst Commented Dec 10, 2018 at 4:51
• @MatthewHerbst above code is for an example only in a website we have multiple section using with class name (for example header, slider, about, services, etc..,) I want to add an id using with the class name. – imjayabal Commented Dec 10, 2018 at 4:55

7 Answers 7

You can use wild card * on class name like below.

$('[class*="box"]').each(function(i, ele) {
  var id = $(this).attr('class');
  $(this).attr('id', id);

});

.box {
  background-color: lightblue;
}
.box--red {
  background-color: red;
}
.box--blue {
  background-color: blue;
}
.box--green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>

<div class="box--red">Hello World</div>

<div class="box--blue">Hello World</div>

<div class="box--green">Hello World</div>

I'm not sure why you would do this is a real-world scenario, but it can be acheived by looping over all div elements, setting the id to the class name, and then removing the class attribute. I've created a vanilla Javascript example below.

Note: id must be unique in the DOM otherwise you may cause multiple issues.

document.querySelectorAll('div').forEach(function(el) {
  el.id = el.classList;
  el.removeAttribute('class');
});

If you need to target different element's that have "box" as the first part of the class attribute you can use the selector [class^="box"] in querySelectorAll like so:

document.querySelectorAll('[class^="box"]').forEach(function(el) {
  el.id = el.classList;
  el.removeAttribute('class');
});

This code would work for you

$("div[class^='box']").each(function() {
  var className = $( this ).attr('class');
  $( this ).attr({id: className}).removeAttr('class');
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

I think the following can do the trick if you are willing to use jQuery:

var boxCollection = $(".wrapper div");
boxCollection.each(function(){
	$(this).attr("id", $(this).attr("class"));
});

#box-1{
 color: red; 
}
#box-2{
  color: orange;
}
#box-3{
  color: blue;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
</div>

I added some color scheme so that its easier to understand the transition.

This code is simple and works for the above requirement.

var a = document.querySelectorAll('div[class^="box"]');
for(var i=0;i<a.length;i++) {
  a[i].setAttribute("id",a[i].getAttribute("class"));
  //console.log(a[i].getAttribute("id"));
}

You can use jQuery's Attribute Starts With Selector to loop through all the elements so that you can set the attribute id with attr with the current element's class. Then remove the class by using removeClass().

$('div[class^=box]').each(function(i, el){
  $(el).attr('id', $(el).attr('class'));
  $(el).removeClass($(el).attr('class'));
});

#box{
}
#box--red{
  color:red;
}
#box--blue{
  color:blue;
}
#box--green{
  color:green;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Vanilla JavaScript: Using querySelectorAll() and forEach()

var elList = document.querySelectorAll('div[class^=box]');
elList.forEach(function(el) {
  el.id = el.className;
  el.removeAttribute('class');
});

#box{
}
#box--red{
  color:red;
}
#box--blue{
  color:blue;
}
#box--green{
  color:green;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

You can do it easily in JavaScript using the querySelectorAll() method and looping through the results:

document.querySelectorAll("[class^=box]").forEach(function(box) {
  box.setAttribute("id", box.className);
  box.removeAttribute("class");
});

<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Note: Although this will work with multi-class tags, spaces are not valid in id. Browsers will allow spaces in id, but it will be harder to work with them. You can replaces spaces with underscores before assigning them the id.