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?

Rozwiązanie dla różnych przeglądarek