Comment puis-je ajouter une classe à un élément DOM en JavaScript?

253

Comment ajouter une classe pour le div?

var new_row = document.createElement('div');
javascript dom sensationnel
la source
6
Dommage que la spécification n'autorise pas la spécification de classes en tant que paramètre pour createElement.
Gaʀʀʏ
Si vous souhaitez ajouter une classe sans supprimer d'autres classes , consultez cette réponse .
Michał Perłakowski

Réponses:

447 
new_row.className = "aClassName";

Voici plus d'informations sur MDN: className

Darko Z
la source
5
qu'en est-il de la définition de plusieurs noms de classe?
Simon
5
@Sponge c'est new_row.className = "aClassName1 aClassName2";juste un attribut, vous pouvez assigner n'importe quelle chaîne que vous aimez, même si cela rend le html invalide
Darko Z
16
Je recommanderais également new_row.classList.add('aClassName');car vous pouvez ensuite ajouter plusieurs noms de classe
StevenTsooo
@StevenTsooo Notez que ce classListn'est pas pris en charge dans IE9 ou ci-dessous.
dayuloli
Existe-t-il un moyen de créer un élément avec un nom de classe dans une ligne de code - et d'obtenir toujours une référence à l'élément? par exemple: myEL = document.createElement ('div'). addClass ('yo') 'ne fonctionnera pas.
Kokodoko
36

Utilisez la .classList.add()méthode:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);
<div class="foo"></div>
Développer l'extrait

Cette méthode est meilleure que d'écraser la classNamepropriété, car elle ne supprime pas les autres classes et n'ajoute pas la classe si l'élément l'a déjà.

Vous pouvez également basculer ou supprimer des classes à l'aide de element.classList(voir la documentation MDN ).

Michał Perłakowski
la source
28

Voici le code source de travail en utilisant une approche de fonction.

<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
la source
8
Alors? Cela sert d'exemple, il n'y a rien de mal à cela.
Carey
Re "pendant la création" : Voulez-vous dire "pendant la création" ? Répondez en modifiant votre réponse , pas ici dans les commentaires. Merci d'avance.
Peter Mortensen
Une explication serait de mise. Par exemple, que voulez-vous dire par «une approche fonctionnelle» ? Pouvez-vous élaborer (en modifiant votre réponse , pas ici dans les commentaires)? Merci d'avance.
Peter Mortensen
15

Il y a aussi la façon DOM de le faire 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
la source
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
la source
2
Pensez à expliquer pourquoi vous avez posté cela, cela aidera les autres à apprendre.
Thomas Smyth
voté car il s'agit d'un JavaScript natif JavaScript / vanilla et n'a pas besoin d'autres bibliothèques ou frameworks.
obotezat
Une explication serait de mise.
Peter Mortensen
1 
var new_row = document.createElement('div');

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

Cela fonctionnera ;-)

la source

PedroProgrammer
la source
Ce n'est pas une bonne solution car cette approche ne fonctionne pas sur tous les navigateurs. setAttribute n'est pris en charge que par 60% des navigateurs utilisés aujourd'hui. caniuse.com/#search=setAttribute
Ragas
0

Il convient également de jeter un œil à:

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}
Yoni
la source
Une explication serait de mise.
Peter Mortensen
0

Si vous souhaitez créer un nouveau champ de saisie avec par exemple le filetype:

 // 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 sortie sera: <input type="file" class="w-95 mb-1">

Si vous souhaitez créer une balise imbriquée à l'aide de JavaScript, la méthode la plus simple consiste à innerHtml:

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

La sortie sera:

<li>
    <span class="toggle">Jan</span>
</li>
Mile Mijatović
la source
0

Solution multi-navigateur

Remarque: La classListpropriété n'est pas prise en charge dans Internet Explorer 9 . Le code suivant fonctionnera dans tous les navigateurs:

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

Source: comment ajouter une classe js

Ravi Makwana
la source
-3

Cela fonctionnera également. 

$(document.createElement('div')).addClass("form-group")
Muhammad Awais
la source
5
Uniquement si vous utilisez jQuery.
Dan Nguyen
1
Merci d'avoir posté, cela a fonctionné pour moi, j'avais besoin d'une solution jquery.
midknyte