253

Bagaimana cara menambahkan kelas untuk div?

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

javascript dom Wow
sumber

6

Sayang sekali spek tidak memungkinkan kelas ditentukan sebagai parameter untuk membuatElement.

Gaʀʀʏ

Jika Anda ingin menambahkan kelas tanpa menghapus kelas lain , lihat jawaban ini .

Michał Perłakowski

447

new_row.className = "aClassName";

Berikut informasi lebih lanjut tentang MDN: className

Darko Z
sumber

5

bagaimana dengan pengaturan beberapa nama kelas?

Simon

5

@ Sponge new_row.className = "aClassName1 aClassName2";hanya atribut, Anda dapat menetapkan string yang Anda suka, bahkan jika itu membuat html tidak valid

Darko Z

16

Saya juga akan merekomendasikan new_row.classList.add('aClassName');karena Anda kemudian dapat menambahkan beberapa nama kelas

StevenTsooo

@StevenTsooo Perhatikan bahwa classListadalah tidak didukung di IE9 atau di bawah.

dayuloli

Apakah ada cara untuk membuat elemen dengan nama kelas dalam satu baris kode - dan masih mendapatkan referensi ke elemen? misalnya: myEL = document.createElement ('div'). addClass ('yo') 'tidak akan berfungsi.

Kokodoko

36

Gunakan .classList.add()metode:

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

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

Luaskan cuplikan

Metode ini lebih baik daripada menimpa classNameproperti, karena tidak menghapus kelas lain dan tidak menambahkan kelas jika elemen sudah memilikinya.

Anda juga dapat beralih atau menghapus kelas menggunakan element.classList(lihat dokumentasi MDN ).

Michał Perłakowski
sumber

28

Berikut adalah kode sumber yang berfungsi menggunakan pendekatan fungsi.

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

8

Begitu? Ini berfungsi sebagai contoh, tidak ada yang salah dengan itu.

Carey

Re "saat dibuat" : Maksud Anda "saat sedang dibuat" ? Tanggapi dengan mengedit jawaban Anda , bukan di sini dalam komentar. Terima kasih sebelumnya.

Peter Mortensen

Penjelasan akan diurutkan. Misalnya, apa yang Anda maksud dengan "pendekatan fungsi" ? Bisakah Anda menguraikan (dengan mengedit jawaban Anda , bukan di sini di komentar)? Terima kasih sebelumnya.

Peter Mortensen

15

Ada juga cara DOM untuk melakukan ini dalam 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
sumber

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
sumber

2

Pertimbangkan untuk menjelaskan mengapa Anda memposting ini, itu akan membantu orang lain untuk belajar.

Thomas Smyth

memilih karena ini adalah JavaScript asli / vanilla JavaScript dan tidak memerlukan perpustakaan atau kerangka kerja lainnya.

obotezat

Penjelasan akan diurutkan.

Peter Mortensen

1

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

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

Ini akan bekerja ;-)

sumber

PedroProgrammer
sumber

Ini bukan solusi yang baik karena pendekatan ini tidak berfungsi di semua browser. setAttribute didukung oleh hanya 60% browser yang digunakan saat ini. caniuse.com/#search=setAttribute

Ragas

0

Anda juga perlu melihat:

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

Yoni
sumber

Penjelasan akan diurutkan.

Peter Mortensen

0

Jika Anda ingin membuat bidang input baru dengan misalnya fileketik:

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

Outputnya adalah: <input type="file" class="w-95 mb-1">

Jika Anda ingin membuat tag bersarang menggunakan JavaScript, cara paling sederhana adalah dengan innerHtml:

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

Outputnya adalah:

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

Mile Mijatović
sumber

0

Solusi lintas-browser

Catatan: classListProperti ini tidak didukung di Internet Explorer 9 . Kode berikut akan berfungsi di semua 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')

Sumber: bagaimana js menambahkan kelas

Ravi Makwana
sumber

-3

Ini juga akan berfungsi.

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

Muhammad Awais
sumber

5

Hanya jika Anda menggunakan jQuery.

Dan Nguyen

1

Terima kasih telah memposting, ini bekerja untuk saya, saya membutuhkan solusi jquery.

midknyte

Bagaimana saya bisa menambahkan kelas ke elemen DOM dalam JavaScript?

Jawaban:

Solusi lintas-browser