javascriptCreating and removing elementsساخت و حذف عنصر در جاوااسکریپت
ساخت و حذف عنصر در جاوااسکریپت را با createElement، append و remove تمرین کنید؛ تفاوت گره، متن و جایگزینی محتوای یک بخش را بشناسید.
مفهوم به زبان ساده
وقتی نتیجهٔ جست‌وجو یا یک کار تازه را نمایش می‌دهیم، لازم نیست رشتهٔ بزرگی از HTML بسازیم. createElement یک عنصر جدید می‌سازد و textContent متن آن را تعیین می‌کند. سپس append آن را فرزند یک عنصر دیگر می‌کند. ساختن عنصر به‌تنهایی به معنی نمایش روی صفحه نیست؛ برای دیده‌شدن، درخت ساخته‌شده باید در جای مناسبی به سند متصل شود.
در مثال، فهرست مستقلی با دو ردیف می‌سازیم. پس از حذف ردیف اول با remove، فقط ردیف دوم باقی می‌ماند. replaceChildren می‌تواند همهٔ فرزندها را با مجموعهٔ تازه جایگزین کند یا بدون آرگومان آن بخش را خالی کند. children فقط عنصرها را می‌شمارد؛ متن مستقیم نیز گره است، اما در همین شمارش قرار نمی‌گیرد. این تفاوت هنگام عیب‌یابی تعداد فرزندها اهمیت دارد.
افزودن دوبارهٔ همان گره، کپی تازه نمی‌سازد و می‌تواند آن را از والد قبلی جابه‌جا کند. همچنین جداشدن عنصر از درخت، همهٔ مرجع‌های نگهداری‌شدهٔ برنامه را خودکار پاک نمی‌کند. برای تمرین، یک ردیف را به دو فهرست اضافه کنید و ببینید در نهایت متعلق به کدام والد است. برای متن دریافتی از کاربر، همچنان textContent را به تفسیر مستقیم HTML ترجیح دهید.
کجا به کار می‌آید؟
- ساخت ردیف تازه برای فهرست کارها یا درس‌ها
- جایگزینی نتیجه‌های قدیمی یک جست‌وجو با نتیجه‌های تازه
از تعریف تا یک مثال واقعی
const list = document.createElement('ul');
const first = document.createElement('li');
first.textContent = 'تمرین اول';
const second = document.createElement('li');
second.textContent = 'تمرین دوم';
list.append(first, second);
console.log(list.children.length);
first.remove();
console.log(list.firstElementChild.textContent);
list.replaceChildren();
console.log(list.children.length);
2 تمرین دوم 0
این مثال چطور کار می‌کند؟
دو عنصر li به فهرست مستقل اضافه می‌شوند.
remove ردیف اول را از والد جدا می‌کند؛ ردیف دوم باقی است.
replaceChildren بدون ورودی، فرزندهای باقی‌مانده را کنار می‌گذارد.
اشتباه رایج
append همان گره را جابه‌جا می‌کند، نه اینکه از آن کپی بسازد. همچنین خالی‌کردن یک بخش با textContent می‌تواند همهٔ عنصرهای فرزند و کنترل‌های داخل آن را حذف کند.
این را به خاطر بسپارید
عنصر را بسازید، محتوای روشن بدهید و آگاهانه به درخت اضافه یا از آن جدا کنید.