CODEWITHSUNDEEP
javascripthtmlcss
Yogesh
Yogesh

Reputation: 3482

Add class when element is created

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?

Upvotes: 1

Views: 1954

Answers (8)

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

Try this... 

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

Upvotes: 0

user663031
user663031

Reputation:

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 recommend doing this at all.

Instead, as described in the comments 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');

Upvotes: 4

Harry
Harry

Reputation: 89750

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

Upvotes: 2

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

use .className:

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

Reference

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

Upvotes: 1

kki3908050
kki3908050

Reputation: 165

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

Upvotes: 0

user2575725
user2575725

Reputation:

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

Upvotes: 1

Suraj Rawat
Suraj Rawat

Reputation: 3763

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

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You can use .className

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

Demo

Upvotes: 1

Related Questions