253

Come faccio ad aggiungere una classe per il div?

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

javascript dom

— Wow
fonte

6

Peccato che la specifica non consenta di specificare le classi come parametro per createElement.

— Gaʀʀʏ

Se vuoi aggiungere una classe senza rimuovere altre classi , vedi questa risposta .

— Michał Perłakowski,

447

new_row.className = "aClassName";

Ecco ulteriori informazioni su MDN: className

— Darko Z
fonte

5

che dire dell'impostazione di più nomi di classe?

— Simon,

5

@Sponge è new_row.className = "aClassName1 aClassName2";solo un attributo, puoi assegnare qualsiasi stringa che ti piace, anche se rende html non valido

— Darko Z

16

Vorrei anche raccomandare new_row.classList.add('aClassName');come è possibile quindi aggiungere più nomi di classe

— StevenTsooo

@StevenTsooo Nota che nonclassList è supportato in IE9 o versioni successive.

— Dayuloli,

C'è un modo per creare un elemento con un nome di classe in una riga di codice e ottenere comunque un riferimento all'elemento? ad esempio: myEL = document.createElement ('div'). addClass ('yo') 'non funzionerà.

— Kokodoko,

36

Usa il .classList.add()metodo:

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

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

Espandi frammento

Questo metodo è meglio che sovrascrivere la classNameproprietà, perché non rimuove altre classi e non aggiunge la classe se l'elemento lo possiede già.

Puoi anche attivare o disattivare le classi utilizzando element.classList(vedi la documentazione MDN ).

— Michał Perłakowski
fonte

28

Qui funziona il codice sorgente usando un approccio funzionale.

<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

Così? Serve da esempio, non c'è niente di sbagliato in questo.

— Carey,

Ri "al momento della creazione" : intendi "al momento della creazione" ? Rispondi modificando la risposta , non qui nei commenti. Grazie in anticipo.

— Peter Mortensen,

Una spiegazione sarebbe in ordine. Ad esempio, cosa intendi con "un approccio funzionale" ? Puoi elaborare ( modificando la tua risposta , non qui nei commenti)? Grazie in anticipo.

— Peter Mortensen,

15

Esiste anche il modo DOM di farlo in 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

Considera di spiegare perché hai pubblicato questo, aiuterà gli altri a imparare.

— Thomas Smyth,

votato perché questo è JavaScript nativo / JavaScript vaniglia e non necessita di altre librerie o framework.

— obotezat,

Una spiegazione sarebbe in ordine.

— Peter Mortensen,

1

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

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

Funzionerà ;-)

fonte

— PedroProgrammer
fonte

Questa non è una buona soluzione in quanto questo approccio non funziona su tutti i browser. setAttribute è supportato solo dal 60% dei browser attualmente in uso. caniuse.com/#search=setAttribute

— Ragas

0

Vale anche la pena dare un'occhiata a:

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

— Yoni
fonte

Una spiegazione sarebbe in ordine.

— Peter Mortensen,

0

Se si desidera creare un nuovo campo di input con ad esempio filedigitare:

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

L'output sarà: <input type="file" class="w-95 mb-1">

Se si desidera creare un tag nidificato utilizzando JavaScript, il modo più semplice è con innerHtml:

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

L'output sarà:

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

— Mile Mijatović
fonte

0

Soluzione cross-browser

Nota: la classListproprietà non è supportata in Internet Explorer 9 . Il seguente codice funzionerà in tutti i browser:

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: come aggiungere classe js

— Ravi Makwana
fonte

-3

Questo funzionerà anche.

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

— Muhammad Awais
fonte

5

Solo se stai usando jQuery.

— Dan Nguyen,

1

Grazie per la pubblicazione, ha funzionato per me, avevo bisogno di una soluzione jquery.

— Midknyte

Come posso aggiungere una classe a un elemento DOM in JavaScript?

Soluzione cross-browser