Comment ajouter une classe pour le div ?
var new_row = document.createElement('div');
qu'en est-il de la définition de plusieurs noms de classe ?
Réponses
Trop de publicités?new_row.className = "aClassName";Voici plus d'informations sur MDN : Nom de la classe
@Sponge new_row.className = "aClassName1 aClassName2"; c'est juste un attribut, vous pouvez assigner n'importe quelle chaîne que vous voulez, même si cela rend le html invalide
Je recommande également new_row.classList.add('aClassName'); car vous pouvez alors ajouter plusieurs noms de classes
Gothdo
Points
4842
Utilisez le .classList.add() méthode :
const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);
<div class="foo"></div>Cette méthode est plus efficace que l'écrasement du fichier className car elle ne supprime pas les autres classes et n'ajoute pas la classe si l'élément la possède déjà.
Vous pouvez également faire basculer ou supprimer des classes à l'aide de la fonction element.classList (voir la documentation MDN ).
Sunny S.M
Points
2465
Voici un code source fonctionnel utilisant une approche par 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>
Re "pendant la création" : Voulez-vous dire "tout en étant créé" ? Répondre par éditer votre réponse pas ici dans les commentaires. Merci d'avance.
Une explication s'impose. Par exemple, que voulez-vous dire par "une approche fonctionnelle" ? Pouvez-vous préciser (en éditer votre réponse (pas ici dans les commentaires) ? Merci d'avance.
Hasse Björk
Points
1212
Il existe aussi la méthode DOM pour faire cela 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);
jedensuscg
Points
63
Si vous créez beaucoup d'éléments, vous pouvez créer votre propre fonction de base createElementWithClass.
function createElementWithClass(type, className) {
const element = document.createElement(type);
element.className = className
return element;
}Très basique je sais, mais pouvoir appeler ce qui suit est moins encombrant.
const myDiv = createElementWithClass('div', 'some-class')par opposition à beaucoup de
const element1 = document.createElement('div');
element.className = 'a-class-name'encore et encore.
14 votes
Dommage que la spécification ne permette pas de spécifier les classes en tant que paramètre de createElement.
0 votes
Si vous voulez ajouter une classe sans supprimer d'autres classes , voir cette réponse .