شرح صفوف ومحتوى الفقرة
يؤدي الإسناد المباشر card.className = "active" إلى مسح واستبدال كامل نص السمة، فتختفي فوراً فئات التخطيط الأساسية مثل "card" و"rounded"! وحتى محاولة الدمج اليدوي عبر card.className += " active" هشة ومعرضة للأخطاء؛ إذ يؤدي نسيان المسافة البادئة إلى التصاق الأسماء ("cardactive") وتكرار النقرات يراكم نفس الفئة عدة مرات.
JavaScript
const bad = document.getElementById('badCard');
const good = document.getElementById('goodCard');
// Overwrites existing "card bordered" classes!
bad.className = 'highlight';
// Preserves existing classes safely!
good.classList.add('highlight');