افزودن Node با متدهای appendChild و insertBefore و replaceChild در JavaScript :
JavaScript یکی از زبان‌های برنامه‌نویسی پرکاربرد در وب است که بسیاری از وبسایت‌های پرطرفدار از آن استفاده می‌کنند. Node ها در JavaScript مانند ساختمان بنیادی برای ایجاد وبسایت هستند و به عنوان بخش های مختلف صفحات وب عمل می کنند. یک Node می‌تواند یک المان HTML، یک متن، یک تصویر، یک دکمه و… باشد.
در اینجا به بررسی متدهای appendChild، insertBefore و replaceChild برای افزودن Node در JavaScript می‌پردازیم.
1. appendChild:
این متد برای افزودن یک Node به انتهای والد Node مورد استفاده قرار می‌گیرد. برای استفاده از این متد، قبل از هر چیز باید یک Node جدید را ایجاد کرده و سپس با استفاده از appendChild آن را به والد اضافه کنیم. مثال زیر یک المان div جدید را ایجاد کرده و به المان body اضافه می‌کند.
“`javascript
const newDiv = document.createElement(‘div’);
document.body.appendChild(newDiv);
“`
2. insertBefore:
این متد برای افزودن یک Node قبل از یک Node خاص مورد استفاده قرار می‌گیرد. این متد دو پارامتر دارد: المان جدید که می‌خواهیم اضافه کنیم و المانی که می‌خواهیم قبل از آن اضافه کنیم. مثال زیر یک المان div جدید را قبل از المان p اضافه می‌کند.
“`javascript
const newDiv = document.createElement(‘div’);
const p = document.querySelector(‘p’);
document.body.insertBefore(newDiv, p);
“`
3. replaceChild:
این متد برای جایگزین کردن یک Node با یک Node جدید مورد استفاده قرار می‌گیرد. این متد دو پارامتر دارد: المان جدید که می‌خواهیم اضافه کنیم و المانی که می‌خواهیم جایگزینش کنیم. مثال زیر یک المان div جدید را با المان p جایگزین می‌کند.
“`javascript
const newDiv = document.createElement(‘div’);
const p = document.querySelector(‘p’);
document.body.replaceChild(newDiv, p);
“`
در نهایت، باید توجه داشت که هر Node در JavaScript دارای یک والد مشخص است و ما می‌توانیم با استفاده از متدهای appendChild، insertBefore و replaceChild، Node های جدید را به والد خود اضافه یا جایگزین کنیم. همچنین می‌توانیم با استفاده از متدهای دیگری مانند removeChild و cloneNode، Node های موجود را حذف یا کپی کنیم.
