253

İçin nasıl sınıf eklerim div?

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

javascript dom

— vay
kaynak

6

Spesifikasyon çok kötü, sınıfların createElement öğesi için parametre olarak belirtilmesine izin vermiyor.

— Gaʀʀʏ

Başka sınıfları kaldırmadan sınıf eklemek istiyorsanız , bu yanıta bakın .

— Michał Perłakowski

447

new_row.className = "aClassName";

MDN hakkında daha fazla bilgi: className

— Darko Z
kaynak

5

birden fazla sınıf adı belirlemeye ne dersiniz?

— Simon

5

@Sponge new_row.className = "aClassName1 aClassName2";sadece bir özellik, geçersiz html için bile olsa istediğiniz herhangi bir dize atayabilirsiniz

— Darko Z

16

Daha new_row.classList.add('aClassName');sonra birden fazla sınıf adı ekleyebileceğiniz için de tavsiye ederim

— StevenTsooo

@StevenTsooo Not classListolduğu desteklenmeyen IE9 veya aşağıdaki.

— dayuloli

Bir kod satırında sınıf adı olan bir öğe oluşturmanın ve yine de öğeye referans almanın bir yolu var mı? örneğin: myEL = document.createElement ('div'). addClass ('yo') 'çalışmaz.

— Kokodoko

36

.classList.add()Yöntemi kullanın :

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

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

Snippet'i genişlet

Bu yöntem, classNameözelliğin üzerine yazmaktan daha iyidir , çünkü diğer sınıfları kaldırmaz ve öğe zaten varsa sınıfı eklemez.

Ayrıca, sınıfları kullanarak geçiş yapabilir veya kaldırabilirsiniz element.classList( MDN belgelerine bakın ).

— Michał Perłakowski
kaynak

28

İşte bir fonksiyon yaklaşımı kullanarak çalışan kaynak kodu.

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

— Güneşli SM
kaynak

8

Yani? Örnek olarak hizmet ediyor, bunda yanlış bir şey yok.

— Carey

Re "oluşturuldu ederken" Şunu Do: "oluşturdu olurken" ? Tarafından cevap cevabınızı düzenleme yorumlarda burada değil. Şimdiden teşekkürler.

— Peter Mortensen

Bir açıklama yapılabilir. Örneğin, "işlev yaklaşımı" ile ne demek istiyorsun ? Ayrıntılı bir açıklama yapabilir misiniz ( cevabınızı düzenleyerek , burada yorumlarda değil)? Şimdiden teşekkürler.

— Peter Mortensen

15

JavaScript'te bunu yapmanın DOM yolu da vardır:

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

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
kaynak

2

Bunu neden yayınladığınızı açıklamayı düşünün, bu başkalarının öğrenmesine yardımcı olacaktır.

— Thomas Smyth

Bu, yerel JavaScript / vanilya JavaScript olduğundan ve başka kitaplıklara veya çerçevelere ihtiyaç duymadığı için oylandı.

— obotezat

Bir açıklama yapılabilir.

— Peter Mortensen

1

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

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

Bu çalışacak ;-)

kaynak

— PedroProgrammer
kaynak

Bu yaklaşım tüm tarayıcılarda çalışmadığından bu iyi bir çözüm değildir. setAttribute, günümüzde kullanılan tarayıcıların yalnızca% 60'ı tarafından desteklenmektedir. caniuse.com/#search=setAttribute

— Ragas

0

Ayrıca bir göz atmaya değer:

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

— Yoni
kaynak

Bir açıklama yapılabilir.

— Peter Mortensen

0

Örneğin, aşağıdakini içeren yeni bir giriş alanı oluşturmak istiyorsanız file:

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

Çıktı şöyle olacaktır: <input type="file" class="w-95 mb-1">

JavaScript kullanarak iç içe bir etiket oluşturmak istiyorsanız, en basit yol şudur innerHtml:

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

Çıktı şöyle olacaktır:

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

— Mile Mijatović
kaynak

0

Çapraz tarayıcı çözümü

Not: classListÖzellik, Internet Explorer 9'da desteklenmez . Aşağıdaki kod tüm tarayıcılarda çalışır:

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

Kaynak: js sınıfı ekleme

— Ravi Makwana
kaynak

-3

Bu da işe yarayacaktır.

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

— Muhammed Awais
kaynak

5

Yalnızca jQuery kullanıyorsanız.

— Dan Nguyen

1

Gönderdiğiniz için teşekkür ederim, bu benim için çalıştı, bir jquery çözümüne ihtiyacım vardı.

— midknyte

JavaScript'teki bir DOM öğesine nasıl sınıf ekleyebilirim?

Çapraz tarayıcı çözümü