Cara membuat banyak elemen dalam javascript

Question

Kami mengulangi elemen-elemen dalam objek daftar dengan metode

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>
 Table of Contents Show
 .bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}2 metode
const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});2 metode
Tambahkan kelas ke elemen dengan pemilih yang berbeda
Hapus kelas dari beberapa elemen
11 Fitur JavaScript Baru yang Menakjubkan di ES13
Bagaimana cara menambahkan banyak elemen dalam JavaScript?
Bagaimana Anda menambahkan beberapa elemen ke kelas?
Bagaimana cara menambahkan banyak div dalam JavaScript?
Bagaimana Anda membuat elemen baru di JavaScript?

8 nya. Metode

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

8 ini bekerja seperti

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

0

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

3

Berlangganan Buletin Kecantikan Coding

Dapatkan wawasan bermanfaat dan tingkatkan pengetahuan pengembangan web Anda dengan tips dan tutorial mingguan dari Coding Beauty. Lebih dari 1.700 pengembang berlangganan

.bold { font-weight: bold; } .big { font-size: 1.2em; }2 metode

Kita dapat menggunakan metode

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

2 sebagai pengganti

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

7 saat pemilih adalah pemilih kelas. Untuk

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

_5, kami meneruskan nama kelas tanpa

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

6 (titik), dan kami menggunakan

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

7 untuk mengubah hasilnya menjadi array sebelum iterasi dengan

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

3

JavaScriptDisalin.

const elements = Array.from(document.getElementsByClassName('text'));
elements.forEach((element) => {
  element.classList.add('big');
});

Catatan. Berbeda dengan metode

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

_9,

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

0 mengembalikan daftar langsung Elemen HTML; . Jika sebuah elemen dalam array tidak lagi memenuhi syarat untuk pemilih yang ditentukan dalam

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

5, itu akan dihapus secara otomatis. Ini berarti bahwa satu iterasi daftar bisa berbeda dari yang lain, bahkan tanpa modifikasi langsung pada daftar

const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });2 metode

Kami menggunakan metode

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

_2 untuk menambahkan kelas ke setiap elemen

Anda dapat menambahkan banyak kelas dengan meneruskan lebih banyak argumen ke

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

4

JavaScriptDisalin.

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big', 'blue');
});

Jika ada kelas yang diteruskan ke

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

_4 sudah ada pada elemen,

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

4 akan mengabaikan ini, alih-alih membuat kesalahan

Tambahkan kelas ke elemen dengan pemilih yang berbeda

Terkadang tidak ada pemilih umum di antara elemen yang ingin Anda tambahkan kelasnya. Untuk kasus seperti itu, Anda dapat meneruskan beberapa pemilih yang dipisahkan koma ke metode

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

9

JavaScriptDisalin.

const elements = document.querySelectorAll('.class-1, #id-1, tag-1');

elements.forEach((element) => {
  element.classList.add('class');
});

Sebagai contoh

HTMLDisalin.

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<div id="box-1">English</div>

<div>Spanish</div>

<div id="box-2">French</div>

<br />

<button id="add">Add class</button>

CSSDisalin.

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

JavaScriptDisalin.

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

0

Kelas ditambahkan ke elemen dengan pemilih berbeda pada klik tombol

Hapus kelas dari beberapa elemen

Sama seperti

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

_2 menambahkan satu atau lebih kelas ke elemen,

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.add('big');
});

9 menghapus satu atau lebih kelas dari elemen

Jadi kita bisa menggunakannya dalam

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

_8 loop ke kelas ke beberapa elemen DOM

JavaScriptDisalin.

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="add">Add class</button>

_1

11 Fitur JavaScript Baru yang Menakjubkan di ES13

Panduan ini akan mempercepat Anda dengan semua fitur terbaru yang ditambahkan di ECMAScript 13. Fitur baru yang kuat ini akan memodernisasi JavaScript Anda dengan kode yang lebih pendek dan lebih ekspresif

Daftar dan dapatkan salinan gratis segera

Ayibatari Ibaba

Ayibatari Ibaba adalah pengembang perangkat lunak dengan pengalaman bertahun-tahun membangun situs web dan aplikasi. Dia telah banyak menulis tentang berbagai topik pemrograman dan telah menciptakan lusinan aplikasi dan pustaka sumber terbuka

Bagaimana cara menambahkan banyak elemen dalam JavaScript?

append() Metode append memungkinkan Anda menambahkan beberapa elemen atau simpul teks ke simpul induk. Seperti yang Anda lihat, Anda dapat memberikan argumen dalam jumlah tak terbatas ke metode append() dan itu akan menambahkan semuanya ke induknya.