253

Como adiciono uma classe para o div?

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

javascript dom Uau
fonte

6

Pena que a especificação não permita que as classes sejam especificadas como um parâmetro para createElement.

Gaʀʀʏ

Se você deseja adicionar uma classe sem remover outras , consulte esta resposta .

Michał Perłakowski 14/03/19

447

new_row.className = "aClassName";

Aqui estão mais informações sobre o MDN: className

Darko Z
fonte

5

que tal definir vários nomes de classe?

Simon

5

@Sponge new_row.className = "aClassName1 aClassName2";é apenas um atributo, você pode atribuir qualquer seqüência que você gosta, mesmo se ele faz para inválido html

Darko Z

16

Eu também recomendaria, new_row.classList.add('aClassName');pois você poderá adicionar vários nomes de classe

StevenTsooo

@StevenTsooo Observe que nãoclassList há suporte no IE9 ou abaixo.

dayuloli

Existe uma maneira de criar um elemento com um nome de classe em uma linha de código - e ainda obter uma referência ao elemento? por exemplo: myEL = document.createElement ('div'). addClass ('yo') 'não funcionará.

Kokodoko

36

Use o .classList.add()método:

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

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

Expandir snippet

Esse método é melhor do que substituir a classNamepropriedade, porque não remove outras classes e não adiciona a classe se o elemento já a possuir.

Você também pode alternar ou remover classes usando element.classList(consulte a documentação do MDN ).

Michał Perłakowski
fonte

28

Aqui está o código fonte de trabalho usando uma abordagem de função.

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

8

Assim? Serve como exemplo, não há nada de errado nisso.

Carey

Re "enquanto criado" : você quer dizer "enquanto está sendo criado" ? Responda editando sua resposta , não aqui nos comentários. Desde já, obrigado.

Peter Mortensen

Uma explicação estaria em ordem. Por exemplo, o que você quer dizer com "uma abordagem de função" ? Você pode elaborar ( editando sua resposta , não aqui nos comentários)? Desde já, obrigado.

Peter Mortensen

15

Também existe a maneira DOM de fazer isso em 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
fonte

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
fonte

2

Considere explicar por que você postou isso; isso ajudará outras pessoas a aprender.

Thomas Smyth

votado porque é JavaScript nativo / JavaScript baunilha e não precisa de outras bibliotecas ou estruturas.

obotezat

Uma explicação estaria em ordem.

Peter Mortensen

1

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

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

Isso vai funcionar ;-)

fonte

PedroProgrammer
fonte

Esta não é uma boa solução, pois essa abordagem não funciona em todos os navegadores. O setAttribute é suportado por apenas 60% dos navegadores em uso hoje. caniuse.com/#search=setAttribute

Ragas

0

Também vale a pena dar uma olhada em:

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

Yoni
fonte

Uma explicação estaria em ordem.

Peter Mortensen

0

Se você deseja criar um novo campo de entrada com, por exemplo, filedigite:

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

A saída será: <input type="file" class="w-95 mb-1">

Se você deseja criar uma tag aninhada usando JavaScript, a maneira mais simples é com innerHtml:

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

A saída será:

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

Mile Mijatović
fonte

0

Solução entre navegadores

Nota: A classListpropriedade não é suportada no Internet Explorer 9 . O código a seguir funcionará em todos os 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')

Fonte: como js adicionar classe

Ravi Makwana
fonte

-3

Isso também irá funcionar.

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

Muhammad Awais
fonte

5

Somente se você estiver usando jQuery.

Dan Nguyen

1

Obrigado por postar, isso funcionou para mim, eu precisava de uma solução jquery.

midknyte

Como posso adicionar uma classe a um elemento DOM em JavaScript?

Respostas:

Solução entre navegadores