How to add additional attribute to an id in element?

Question

Couldn't find here at Stackoverflow.

How can I add additional attribute to an element?

I need this

<div id="test"></div>

to be

<div id="test test2"></div>

document.getElementById("test").setAttribute("id", "test2") sets to

<div id="test2"></div>

EDIT: the question provided was different question and not about class.

You can't with ID. Id is a single word and has to be unique to your document. See the docs at the [mozilla dev network](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) — scrappedcola, Dec 20 '16 at 23:55
Possible duplicate of [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — scrappedcola, Dec 21 '16 at 00:01

score 2 · Accepted Answer · answered Dec 20 '16 at 23:55

Try to read the attribute by using the getAttribute and then con-cat the new value at the end like this:

document.getElementById("test").setAttribute("id", document.getElementById("test").getAttribute("id") + " test2")

EDIT

Just keep in mind to avoid doing this with the ID attribute. You can do it with almost any other attribute though.

Example with the class attribute

document.getElementById("test1").setAttribute("class", document.getElementById("test1").getAttribute("class") + " test2class")

.test {
  color:black;
}

.test.test2class {
  color:red;
}

<div id="test1" class="test">This is a test</div>

score 1 · Answer 2 · answered Dec 21 '16 at 00:08

Well, actually you are not looking to add a new attribute, you are looking for a way to change the value of an attribute that is already exists.

The setAttribute function can do this for you:

document.getElementById("test").setAttribute("id", document.getElementById("test").getAttribute("id") + " test2")

(After running this code you will get id="test test2" on your element).

Note that specifically the id attribute should not contain spaces

2 Answers2