253

¿Cómo agrego una clase para el div?

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

javascript dom

— Guau
fuente

66

Lástima que la especificación no permita que las clases se especifiquen como un parámetro para createElement.

— Gaʀʀʏ

Si desea agregar una clase sin eliminar otras clases , vea esta respuesta .

— Michał Perłakowski

447

new_row.className = "aClassName";

Aquí hay más información sobre MDN: className

— Darko Z
fuente

55

¿Qué pasa con la configuración de múltiples nombres de clase?

— Simon

55

@Sponge new_row.className = "aClassName1 aClassName2";es solo un atributo, puede asignar cualquier cadena que desee, incluso si se convierte en html no válido

— Darko Z

16

También recomendaría, new_row.classList.add('aClassName');ya que puede agregar varios nombres de clase

— StevenTsooo

@StevenTsooo Tenga en cuenta que noclassList es compatible con IE9 o inferior.

— dayuloli

¿Hay alguna manera de crear un elemento con un nombre de clase en una línea de código y aún así obtener una referencia al elemento? por ejemplo: myEL = document.createElement ('div'). addClass ('yo') 'no funcionará.

— Kokodoko

36

Usa el .classList.add()método:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

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

Expandir fragmento

Este método es mejor que sobrescribir la classNamepropiedad, porque no elimina otras clases y no agrega la clase si el elemento ya la tiene.

También puede alternar o eliminar clases utilizando element.classList(consulte la documentación de MDN ).

— Michał Perłakowski
fuente

28

Aquí está trabajando el código fuente usando un enfoque de función.

<html>
    <head>
        <style>
            .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
        </style>
    </head>

    <body>
    <div id="dd"></div>
        <script>
            (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);
            })();
        </script>
    </body>
</html>

— Sunny SM
fuente

8

¿Entonces? Sirve como ejemplo, no hay nada de malo en eso.

— Carey

Re "mientras se crea" : ¿Quieres decir "mientras se crea" ? Responda editando su respuesta , no aquí en los comentarios. Gracias por adelantado.

— Peter Mortensen

Una explicación estaría en orden. Por ejemplo, ¿qué quiere decir con "un enfoque funcional" ? ¿Puedes dar más detalles ( editando tu respuesta , no aquí en los comentarios)? Gracias por adelantado.

— Peter Mortensen

15

También existe la forma DOM de hacer esto en 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);

— Hasse Björk
fuente

2

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

— Diego Slinger
fuente

2

Considere explicar por qué publicó esto, ayudará a otros a aprender.

— Thomas Smyth

votó porque este es JavaScript nativo / JavaScript vainilla y no necesita otras bibliotecas o marcos.

— obotezat el

Una explicación estaría en orden.

— Peter Mortensen

1

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

new_row.setAttribute("class", "YOUR_CLASS");

Esto funcionará ;-)

fuente

— PedroProgramador
fuente

Esta no es una buena solución ya que este enfoque no funciona en todos los navegadores. setAttribute solo es compatible con el 60% de los navegadores en uso hoy en día. caniuse.com/#search=setAttribute

— Ragas

0

También vale la pena echar un vistazo a:

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

— Yoni
fuente

Una explicación estaría en orden.

— Peter Mortensen

0

Si desea crear un nuevo campo de entrada con, por ejemplo, fileescriba:

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

La salida será: <input type="file" class="w-95 mb-1">

Si desea crear una etiqueta anidada usando JavaScript, la forma más sencilla es con innerHtml:

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

La salida será:

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

— Mile Mijatović
fuente

0

Solución de navegador cruzado

Nota: La classListpropiedad no es compatible con Internet Explorer 9 . El siguiente código funcionará en todos los navegadores:

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

Fuente: cómo agregar clase js

— Ravi Makwana
fuente

-3

Esto también funcionará.

$(document.createElement('div')).addClass("form-group")

— Muhammad Awais
fuente

55

Solo si está utilizando jQuery.

— Dan Nguyen

1

Gracias por publicar, esto funcionó para mí, necesitaba una solución jquery.

— midknyte

¿Cómo puedo agregar una clase a un elemento DOM en JavaScript?

Solución de navegador cruzado