javascript - Create element and assign class in one step - Stack Overflow

Here are two ways that I know to create an element and assign it a class:

const el = document.createElement('div');
el.classList.add('foo');

const el = document.createElement('div');
foo.className = 'foo';

Is there a one-step solution for it? I tried

const el = document.createElement('div').classList.add('foo');

but it doesn't work.

Here are two ways that I know to create an element and assign it a class:

const el = document.createElement('div');
el.classList.add('foo');

const el = document.createElement('div');
foo.className = 'foo';

Is there a one-step solution for it? I tried

const el = document.createElement('div').classList.add('foo');

but it doesn't work.

• javascript

Share Follow edited Feb 19, 2021 at 22:18 user90726 asked Feb 19, 2021 at 21:40 user90726user90726 97511 gold badge1010 silver badges3333 bronze badges 2

• 1 You could let el = '<div class="foo">Content here</div>'; and insert using innerHTML or insertAdjacentHTML() – Randy Casburn Commented Feb 19, 2021 at 21:47
• 1 You cant not chain class name addition to object that in time of creation does not exists.as per your exact code.You could create it in one go if you use it as string and add class name in it. – ikiK Commented Feb 19, 2021 at 21:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Although the usual way to do it is a two-step technique, try this:

const el = Object.assign(document.createElement('div'), { className: 'foo' });

console.log(el);
console.log(el.className);

You're stuck with either using an HTML string and innerHTML or trying jQuery which allows the chaining of mands, but for something so small it doesn't make sense to bring jQuery into the mix, what's the reason you needed a one-liner?

For a rough working example in vanilla js

var myHTML = "<div class='hello'></div>";
document.body.innerHTML += myHTML