How to add class to an element create by appendChild

Question

I want to ask how to add a class for an element I create by appendChild in javascript

document.forms[0].appendChild(document.createElement("input"));

How to add a class for the input element I created?

I just use Javascript and I don't like jQuery, please send answer in pure javascript.

score 53 · Answer 1 · answered Sep 25 '12 at 07:19

I want to ask how to add a class for an element I create by appendChild in javascript

Like any other element you have a reference. It doesn't matter if it's created in JS via createElement, or you obtained a reference to the node in another way. Assuming input contains the reference to your node:

var input = document.createElement("input");

You can either use className:

input.className = "foo";

classList:

input.classList.add("foo");

setAttribute:

input.setAttribute("class", "foo");

The first one is widely supported by any browser, so I strongly suggest that one unless you're not in a modern browser and you want to manipulate each class you set, so classList will be more useful. I strongly avoid the latter, because with setAttribute you're going to set the HTML's attribute not the class name of the JS object: then the browser will map that value to the JS's property but in some cases it will fails (see, for instance, some versions of IE) so the class won't be applied even if the HTML node will have that attribute.

Notice that all the methods above are working despite how to HTML node reference is obtained, so also with:

var input = document.getElementById("my-input");

And so on.

In your case, because appendChild returns the reference to the node appended, you can also write everyting in one statement:

document.forms[0]
    .appendChild(document.createElement("input"))
    .className = "foo";

Hope it helps.

several solutions with informative explanations = excellent answer! — targumon, Oct 08 '13 at 15:50
`classList`: exactly what I was looking for. Super cool ! :) — robe007, Jun 04 '19 at 14:55

xdazz · Answer 2 · 2012-09-25T07:22:06.263

9

You need a variable for the created element.

var input = document.createElement("input");
input.className = 'class_to_add';
document.forms[0].appendChild(input);

Update:

.appendChild return the child, so you could also do it with out a variable:

document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";

edited Sep 25 '12 at 07:22

answered Sep 25 '12 at 07:06

xdazz

158,678
38
247
274

Why is this downvoted ? I was about to post the same answer... – Denys Séguret Sep 25 '12 at 07:07
@Downvoter Could you explain what's wrong? – xdazz Sep 25 '12 at 07:08
Hmm, I would guess because the proper way to add/remove attributes to an element is via setAttribute and getAttribute. – Geuis Sep 25 '12 at 07:09
1

For the class, I think the recommended way is to *not* use setAttribute. – Denys Séguret Sep 25 '12 at 07:10
What if I want to keep a reference to the created element? (input). Can I still create the whole thing in one line of code? – Kokodoko Dec 30 '15 at 12:26

score 1 · Answer 3 · answered Sep 25 '12 at 07:07

1

Use the setAttribute and getAttribute methods:

var i = document.createElement('input'); 
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);

answered Sep 25 '12 at 07:07

Geuis

41,122
56
157
219

1

Look at this: http://www.tgerm.com/2009/02/javascript-ie-setattributeclass-or.html – xdazz Sep 25 '12 at 07:11

score 1 · Answer 4 · answered Sep 25 '12 at 07:11

1

Like:

document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";

answered Sep 25 '12 at 07:11

Kernel James

3,752
25
32

@xdazz [I don't think so](https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild) – Denys Séguret Sep 25 '12 at 07:15
@dystroy Yep, missed that, It's odd that `appendChild` will return child not the element self. – xdazz Sep 25 '12 at 07:19
But this is exactly what was asked, no? *"I don't now how to add a class for the input element I created."* So, `appendChild` will return the child appended, in that case the `input` ones. – ZER0 Sep 25 '12 at 07:23

How to add class to an element create by appendChild

4 Answers4

Linked

Related