How to add class to an element create by appendChild [duplicate]

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.

Cf

Answer 1

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.

Supereminent

several solutions with informative explanations = excellent answer! – Verisimilar

classList: exactly what I was looking for. Super cool ! :) – Jube

Answer 2

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";

Lion

Why is this downvoted ? I was about to post the same answer... – Fernandez

@Downvoter Could you explain what's wrong? – Lion

Hmm, I would guess because the proper way to add/remove attributes to an element is via setAttribute and getAttribute. – Expediential

For the class, I think the recommended way is to not use setAttribute. – Fernandez

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? – Smaragd

Answer 3

Use the setAttribute and getAttribute methods:

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

Expediential

Look at this: tgerm.com/2009/02/javascript-ie-setattributeclass-or.html – Lion

Answer 4

Like:

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

Laise

@Lion I don't think so – Fernandez

@dystroy Yep, missed that, It's odd that appendChild will return child not the element self. – Lion

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. – Supereminent