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.

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.

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