web-dev-qa-db-fra.com

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

Comment ajouter une classe pour la div?

var new_row = document.createElement('div');
javascriptdom
191
wow
new_row.className = "aClassName";

Voici plus d'informations sur MDN: className

353
Darko Z

Voici le code source de travail utilisant l'approche de la 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 class while created!!!';
            document.getElementById('dd').appendChild(newNode);           
        })();
    </script>
</body>
</html>
23
Sunny S.M

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

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

Cette méthode est préférable au remplacement de la propriété className car elle ne supprime pas les autres classes et n'ajoute pas la classe si l'élément en dispose déjà.

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

18
Michał Perłakowski

Il y a aussi la manière de faire cela en JavaScript dans le DOM:

// 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 );
14
Hasse Björk
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]);
2
Diego Slinger

Si vous voulez créer un nouveau champ de saisie avec par exemple file type

 // Create new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // New input file will have type file
 newFileInput.type = "file"; 

 // 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 à utiliser innerHtml

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

La sortie sera:

<li>
    <span class="toggle">Jan</span>
</li>
0
Mile Mijatovic

Vaut également le coup d'oeil

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