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?

Respuestas:

Solución de navegador cruzado