253

Jak dodać klasę dla div?

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

javascript dom łał
źródło

6

Szkoda, że specyfikacja nie pozwala na określenie klas jako parametru createElement.

Gaʀʀʏ

Jeśli chcesz dodać klasę bez usuwania innych klas , zapoznaj się z tą odpowiedzią .

Michał Perłakowski

447

new_row.className = "aClassName";

Oto więcej informacji na temat MDN: className

Darko Z
źródło

5

co z ustawianiem wielu nazw klas?

Simon

5

@ Gąbka new_row.className = "aClassName1 aClassName2";jest tylko atrybutem, możesz przypisać dowolny ciąg, który ci się podoba, nawet jeśli powoduje nieprawidłowy HTML

Darko Z

16

new_row.classList.add('aClassName');

Poleciłbym

@StevenTsooo Uwaga, która nieclassList jest obsługiwana w IE9 lub niższej wersji.

dayuloli

Czy istnieje sposób na utworzenie elementu z nazwą klasy w jednym wierszu kodu - i nadal uzyskanie odwołania do elementu? na przykład: myEL = document.createElement („div”). addClass („yo”) ”nie będzie działać.

Kokodoko

36

Użyj .classList.add()metody:

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

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

Rozwiń fragment kodu

Ta metoda jest lepsza niż nadpisywanie classNamewłaściwości, ponieważ nie usuwa innych klas i nie dodaje klasy, jeśli element już ją ma.

Możesz także przełączać lub usuwać klasy za pomocą element.classList(patrz dokumentacja MDN ).

Michał Perłakowski
źródło

28

Oto działający kod źródłowy wykorzystujący podejście funkcyjne.

<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
źródło

8

Więc? Służy jako przykład, nie ma w tym nic złego.

Carey,

Re „podczas tworzenia” : Czy masz na myśli „podczas tworzenia” ? Odpowiedz, edytując odpowiedź , a nie tutaj w komentarzach. Z góry dziękuję.

Peter Mortensen

Wytłumaczenie byłoby w porządku. Na przykład, co rozumiesz przez „podejście funkcyjne” ? Czy potrafisz opracować ( edytując odpowiedź , a nie tutaj w komentarzach)? Z góry dziękuję.

Peter Mortensen

15

Istnieje również sposób DOM, aby to zrobić w 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
źródło

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
źródło

2

Zastanów się, dlaczego to opublikowałeś, pomoże to innym w nauce.

Thomas Smyth,

zagłosował, ponieważ jest to natywny JavaScript / waniliowy JavaScript i nie potrzebuje żadnych innych bibliotek ani ram.

obotezat

Wytłumaczenie byłoby w porządku.

Peter Mortensen

1

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

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

To zadziała ;-)

źródło

PedroProgrammer
źródło

To nie jest dobre rozwiązanie, ponieważ to podejście nie działa we wszystkich przeglądarkach. setAttribute jest obsługiwany tylko przez 60% używanych obecnie przeglądarek. caniuse.com/#search=setAttribute

Ragas

0

Warto również spojrzeć na:

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

Yoni
źródło

Wytłumaczenie byłoby w porządku.

Peter Mortensen

0

Jeśli chcesz utworzyć nowe pole wejściowe, na przykład filewpisz:

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

Dane wyjściowe będą: <input type="file" class="w-95 mb-1">

Jeśli chcesz utworzyć zagnieżdżony tag za pomocą JavaScript, najprostszym sposobem jest innerHtml:

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

Dane wyjściowe będą:

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

Mile Mijatović
źródło

0

Rozwiązanie dla różnych przeglądarek

Uwaga: classListWłaściwość nie jest obsługiwana w programie Internet Explorer 9 . Poniższy kod będzie działał we wszystkich przeglądarkach:

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

Źródło: jak js dodać klasę

Ravi Makwana
źródło

-3

To też zadziała.

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

Muhammad Awais
źródło

5

Tylko jeśli używasz jQuery.

Dan Nguyen

1

Dziękuję za wysłanie, to zadziałało dla mnie, potrzebowałem rozwiązania jquery.

midknyte

Jak mogę dodać klasę do elementu DOM w JavaScript?

Odpowiedzi:

Rozwiązanie dla różnych przeglądarek