How can I add a class to a DOM element in JavaScript

Question

How do I add a class for the div   var new row   document createElement  div

User · Answer

If you want to create a new input field with for example file type:

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

The output will be: <input type="file" class="w-95 mb-1">

If you want to create a nested tag using JavaScript, the simplest way is with innerHtml:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

The output will be:

<li>
    <span class="toggle">Jan</span>
</li>

User · Answer

This is better way let new row   document createElement  div    new row setAttribute  quot class quot    quot classname quot    new row setAttribute  quot id quot    quot idname quot

User · Answer

There is also the DOM way of doing this in JavaScript      Create a div and set class var new row   document createElement  div    new row setAttribute  class    aClassName       Add some text new row appendChild document createTextNode  Some text        Add it to the document body document body appendChild new row

User · Answer

Use the  classList add   method    x000D   x000D  const element   document querySelector  div foo    x000D  element classList add  bar    x000D  console log element className   x000D   lt div class  foo  gt  lt  div gt  x000D   x000D   x000D    This method is better than overwriting the className property  because it doesn t remove other classes and doesn t add the class if the element already has it   You can also toggle or remove classes using element classList  see the MDN documentation

User · Answer

new row className    aClassName     Here s more information on MDN   className

User · Answer

It is also worth taking a look at   var el   document getElementById  hello    if el        el className    el className     someClass     someClass

User · Answer

Here is working source code using a function approach    lt html gt       lt head gt           lt style gt               news padding 10px  margin-top 2px background-color red color  fff            lt  style gt       lt  head gt        lt body gt       lt div id  dd  gt  lt  div gt           lt script gt               function                    var countup   this                  var newNode   document createElement  div                    newNode className    textNode news content                   newNode innerHTML    this created div contains a class while created                      document getElementById  dd   appendChild newNode                              lt  script gt       lt  body gt   lt  html gt

User · Answer

var new row   document createElement  div     new row setAttribute  class    YOUR CLASS      This will work  -   source

User · Answer

var newItem   document createElement  div    newItem style     background-color red     newItem className     new class    newItem innerHTML      lt img src    profitly files TimCover1 bigger jpg  width 50 height 50 gt  some long text with ticker  DDSSD    var list   document getElementById  x-auto-1    list insertBefore newItem  list childNodes 0

User · Answer

If you want to create multiple elements all with in one method   x000D   x000D  function createElement el  options  listen       appendTo       let element   document createElement el       Object keys options  forEach function  k          element k    options k               if listen length  gt  0           listen forEach function l              element addEventListener l event  l f                         appendTo append element       let main   document getElementById  addHere    createElement  button    id   myBtn   className   btn btn-primary   textContent   Add Alert         event   click     f  function        createElement  div    className   alert alert-success mt-2   textContent   Working         main           main   x000D   lt link rel  stylesheet  href  https   cdn jsdelivr net npm bootstrap 4 6 0 dist css bootstrap min css  integrity  sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L Z6nronJ3oUOFUFpCjEUQouq2 l  crossorigin  anonymous  gt    lt div id  addHere  class  text-center mt-2  gt  lt  div gt  x000D   x000D   x000D

User · Answer

lt script gt      document getElementById  add-Box   addEventListener  click   function  event            let itemParent   document getElementById  box-Parent            let newItem   document createElement  li            newItem className    box           itemParent appendChild newItem           lt  script gt

User · Answer

Cross-browser solution  Note  The classList property is not supported in Internet Explorer 9  The following code will work in all browsers   function addClass id classname      var element  name  arr    element   document getElementById id     arr   element className split  quot   quot      if  arr indexOf classname     -1       check if class is already added     element className     quot   quot    classname         addClass  div1   show    Source  how to js add class

User · Answer

If doing a lot of element creations  you can create your own basic createElementWithClass function  function createElementWithClass type  className      const element   document createElement type     element className   className   return element     Very basic I know  but being able to call the following is less cluttering  const myDiv   createElementWithClass  div    some-class    as opposed to a lot of  const element1   document createElement  div     element className    a-class-name   over and over

[javascript] How can I add a class to a DOM element in JavaScript?

Examples related to javascript

Examples related to dom