I want a class to be added whenever div element is created.

var divElement = document.createElement('div') 

should return

<div class="foo"></div>

EDIT:

I do not want to repeatedly add Class whenever I create another document.createElement('div') using className or setAttribute. I should just write document.createElement('div') and it should add class in future.

Can we change at document.createElement and do it?

I want a class to be added whenever div element is created.

var divElement = document.createElement('div') 

should return

<div class="foo"></div>

EDIT:

I do not want to repeatedly add Class whenever I create another document.createElement('div') using className or setAttribute. I should just write document.createElement('div') and it should add class in future.

Can we change at document.createElement and do it?

• javascript
• html
• css

Share Improve this question Follow edited Nov 6, 2014 at 4:47 Yogesh asked Nov 6, 2014 at 4:32 YogeshYogesh 3,48299 gold badges3232 silver badges4646 bronze badges 5

• Sorry mate, did not quite understand the update to the question. You can just add the className wherever required. – Harry Commented Nov 6, 2014 at 4:40
• @Harry Can default class be added just by document.createElement('div') – Yogesh Commented Nov 6, 2014 at 4:40
• None that I am aware of mate. You can probably use a function and call it wherever needed? – Harry Commented Nov 6, 2014 at 4:41
• did you try to make a function which create a div with class name you want. like this: function createDiv(clsName){var div =document.createElement('div');div.className = clsName;return div;} – Will Wang Commented Nov 6, 2014 at 4:49
• @WillWang Yes, that works. But, I am looking for different solution. Can we change at document.createElement? – Yogesh Commented Nov 6, 2014 at 4:50

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 4

If you want to override the behavior of document.createElement -- really, really want to -- then:

document.createElement = (function() {
    var original_createElement = document.createElement.bind(document);
    return function(tagName, cls) {
        var elt = original_createElement(tagName);
        elt.className = cls;
        return elt;
    };
}());

A couple of notes about this:

1. We use a IIFE in order to isolate original_createElement inside the closure.

2. We need to do the bind on document.createElement because that function requires the document context.

3. This function is designed to be used as in document.createElement('div', 'foo'). If you really, really want foo to be added to every single element you ever create in the future, then remove the cls argument and do elt.className = 'foo'; instead.

But in any case I don't remend doing this at all.

Instead, as described in the ments and other answers, define your own functionn:

function createElementWithClassFoo() {
    var div = document.createElement('div');
    div.classList.add('foo');
    return div;
}

Or generalize it to any class:

function createElementWithClass(cls) {
    var div = document.createElement('div');
    div.classList.add(cls);
    return div;
}

Then call

var divElement = createElementWithClassFoo();
var divElement = createElementWithClass('foo');

You should add the following line to the code before appending the child. This would add the class to the element that was just created.

divElement.className = 'foo';

like given below:

var divElement = document.createElement('div') ;

divElement.className = 'foo';

document.body.appendChild(divElement);

Fiddle Demo

Using a pre-defined function to reduce repetition:

function appendDefaultDiv(){
    var divElement = document.createElement('div') ;

    divElement.className = 'foo';
    divElement.innerHTML = "Some Text";

    return divElement;
}


document.body.appendChild(appendDefaultDiv());

Fiddle Demo 2

You can use .className

var divElement = document.createElement('div');
divElement.className = 'foo';

Demo

You can use function to avoid repetition.

var createDiv = function() {
  var div = document.createElement('div');
  div.className = 'what-ever-class';
  return div;
};

console.log(createDiv());
console.log(createDiv());

Open console ....

use .className:

var divElement = document.createElement('div');
    divElement.className = 'foo';

Reference

https://developer.mozilla/en-US/docs/Web/API/Element.className

u can add property like this divElement.className = 'foo';

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
div.id="vik";
div.setAttribute('id', 'myid');
div.setAttribute('class', 'myclass');

document.body.appendChild(div);

Try this...

var $div = $("<div>", {class: "foo"});
$("body").append($div);