253

Comment ajouter une classe pour le div?

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

javascript dom

— sensationnel
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

447

new_row.className = "aClassName";

Voici plus d'informations sur MDN: className

— Darko Z
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
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
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
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
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
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
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ć
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
source

-3

Cela fonctionnera également.

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

— Muhammad Awais
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

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

Solution multi-navigateur