إضافة / حذف عناصر
إدارة عناصر الصفحة
الكائن
في هذا الدرس ستتعلم كيف تنشئ عناصر جديدة، كيف تضيفها في الصفحة و في النهاية ستتعلم كيف تحذف عناصر منها.
إنشاء عنصر و إضافته في الصفحة
لإنشاء عنصر جديد في الصفحة يمكنك استخدام إحدى الدوال التالية:
- الدالة
createElement() تستخدم لإنشاء وسم HTML مثل<p> و<div> . - الدالة
createTextNode() تستخدم لإنشاء نص عادي يمكن عرضه بداخل وسم.
الوسم الذي تنشئه بواسطة جافاسكربت، لا يظهر في الصفحة إلا بعد أن تقوم بإضافته فيها.
سنتعرف تباعاً على جميع الدوال التي يمكن من خلالها إضافة العناصر التي يتم إنشاءها في الصفحة.
إضافة العنصر الجديد في آخر العنصر
يمكنك استخدام الدالة
هذه الدالة تقوم بإضافة العنصر الذي تم تمريره لها في آخر العنصر الذي قام باستدعائها.
في المثال التالي قمنا بإنشاء وسم
بعدها قمنا بإضافة الوسم
مثال
<!DOCTYPE html>
<html>
<body>
<main>
<h1>JS Append New Element</h1>
<p>Javascript allow you to create a new element and append it to another element.</p>
</main>
<script>
// pElement و قمنا بتخزينه في المتغير <p> هنا قمنا بإنشاء وسم
var pElement = document.createElement('p');
// pText هنا قمنا بإنشاء نص يمكن وضعه في وسم و قمنا بتخزينه في المتغير
var pText = document.createTextNode('This paragraph is added via Javascript.');
// pElement في pText هنا قمنا بإضافة
pElement.appendChild(pText);
// mainElement في الصفحة في المتغير <main> هنا قمنا بتخزين أول وسم
var mainElement = document.getElementsByTagName('main')[0];
// mainElement في pElement هنا قمنا بإضافة
mainElement.appendChild(pElement);
</script>
</body>
</html>إضافة العنصر الجديد قبل عنصر محدد
يمكنك استخدام الدالة
عند استدعائها يجب أن تمرر لها كائنين، الأول يمثل العنصر الجديد و الثاني يمثل العنصر الذي تريد إضافته قبله.
في المثال التالي قمنا بإنشاء وسم
بعدها قمنا بإضافة الوسم
مثال
<!DOCTYPE html>
<html>
<body>
<main>
<h1>JS Insert New Element Before</h1>
<p>Javascript allow you to create a new element and insert it before another element.</p>
</main>
<script>
// divElement و قمنا بتخزينه في المتغير <div> هنا قمنا بإنشاء وسم
var divElement = document.createElement('div');
// divText هنا قمنا بإنشاء نص يمكن وضعه في وسم و قمنا بتخزينه في المتغير
var divText = document.createTextNode('This div is added via Javascript.');
// divElement في divText هنا قمنا بإضافة
divElement.appendChild(divText);
// mainElement في الصفحة في المتغير <main> هنا قمنا بتخزين أول وسم
var mainElement = document.getElementsByTagName('main')[0];
// mainElement قبل العنصر divElement هنا قمنا بإضافة
document.body.insertBefore(divElement, mainElement);
</script>
</body>
</html>إضافة كود HTML جاهز في العنصر
في حال أردت تمرير كود HTML بشكل مباشر في العنصر فيمكنك إسناده له كنص عن طريق الخاصية
هذه الخاصية تقوم بتديل كل محتوى العنصر بالمحتوى الذي نمرره لها.
في المثال التالي قمنا بتبديل كل المحتوى الموجود في الوسم
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Replace HTML Content</h1>
<main>
<p>This content will be replaced.</p>
<p>This content will be replaced.</p>
<p>This content will be replaced.</p>
<p>This content will be replaced.</p>
</main>
<script>
// mainElement في الصفحة في المتغير <main> هنا قمنا بتخزين أول وسم
var mainElement = document.getElementsByTagName('main')[0];
// mainElement هنا قمنا بتبديل كل المحتوى الموجود في العنصر الذي يمثله المتغير
mainElement.innerHTML = '<p>Content is totally replaced by <b>Javascript</b></p>';
</script>
</body>
</html>تمرير كود HTML بجانب المحتوى
يمكنك استخدام الدالة
عندها استدعائها يجب أن تمرر لها قيمتين، الأولى تمثل الموقع الذي سيتم إضافة الكود فيه و الثانية تمثل الكود الذي سيتم إضافته.
فيما يلي القيم النصية التي يمكنك استخدامها مع الدالة
| القيمة | معناها |
|---|---|
| لإضافة الكود قبل العنصر مباشرةً. | |
| لإضافة الكود بعد العنصر مباشرةً. | |
| لإضافة الكود في أول العنصر، أي قبل المحتوى الحالي الموجود فيه. | |
| لإضافة الكود في آخر العنصر، أي بعد المحتوى الحالي الموجود فيه. |
في المثال التالي قمنا بإضافة كود HTML قبل و بعد الوسم الذي يملك
المثال الأول
<!DOCTYPE html>
<html>
<body>
<h1>JS Insert Content Before And After Element</h1>
<p id="demo">Demo Element.</p>
<script>
// element في المتغير demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element هنا قمنا بإضافة فقرة قبل الوسم الذي يمثله المتغير
element.insertAdjacentHTML('beforebegin', '<p>This element is added before the demo element.</p>');
// element هنا قمنا بإضافة فقرة قبل الوسم الذي يمثله المتغير
element.insertAdjacentHTML('afterend', '<p>This element is added after the demo element.</p>');
</script>
</body>
</html>في المثال التالي قمنا بإضافة كود HTML في بداية و النهاية الوسم الذي يملك
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<h1>JS Insert Content At The Begining And The End Of Element</h1>
<p id="demo">Demo Element</p>
<script>
// element في المتغير demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element هنا قمنا بإضافة كلمة بخط عريض في بداية الوسم الذي يمثله المتغير
element.insertAdjacentHTML('afterbegin', '<b>After Beginnig</b> - ');
// element هنا قمنا بإضافة كلمة بخط عريض في نهاية الوسم الذي يمثله المتغير
element.insertAdjacentHTML('beforeend', ' - <b>Before End</b>');
</script>
</body>
</html>حذف عنصر من الصفحة
يمكنك استخدام الدالة
إذاً يمكنك استدعائها من أي عنصر حتى تقوم بحذفه من الصفحة.
في المثال التالي قمنا بحذف الوسم الذي يملك
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Remove Element</h1>
<p>The remove() function can be used to remove element.</p>
<p id="demo">This element will be removed.</p>
<script>
// element في المتغير demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// من الصفحة element هنا قمنا بحذف الوسم الذي يمثله المتغير
element.remove();
</script>
</body>
</html>حذف العنصر الإبن
يمكنك استخدام الدالة
إذاً يجب استدعائها من العنصر الأب، و تمرير العنصر الإبن الذي تريد حذفه منه لها.
في المثال التالي قمنا بحذف الوسم الذي يملك
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Remove Child Element</h1>
<div id="parent">
<p>The removeChild() function can be used to remove a child element.</p>
<p id="child">This element will be removed.</p>
</div>
<script>
// parentElement في المتغير parent يساوي id هنا قمنا بتخزين العنصر الذي يملك
var parentElement = document.getElementById('parent');
// childElement في المتغير child يساوي id هنا قمنا بتخزين العنصر الذي يملك
var childElement = document.getElementById('child');
// childElement هنا قمنا بحذف الوسم الذي يمثله المتغير
// parentElement الموجود بداخل الوسم الذي يمثله المتغير
parentElement.removeChild(childElement);
</script>
</body>
</html>الدالة
هنا قمنا بإعادة المثال السابق و لكننا هذه المرة قمنا بتخزين العنصر الذي تم حذفه في متغير و من بعدها قمنا بإعلام المستخدم بأنه تم حذفه.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Store Removed Element</h1>
<div id="parent">
<p>The removeChild() function can be used to remove a child element.</p>
<p id="child">This element will be removed.</p>
</div>
<script>
// parentElement في المتغير parent يساوي id هنا قمنا بتخزين العنصر الذي يملك
var parentElement = document.getElementById('parent');
// childElement في المتغير child يساوي id هنا قمنا بتخزين العنصر الذي يملك
var childElement = document.getElementById('child');
// childElement هنا قمنا بحذف الوسم الذي يمثله المتغير
// parentElement الموجود بداخل الوسم الذي يمثله المتغير
// removedElement مع تخزينه في المتغير
var removedElement = parentElement.removeChild(childElement);
// removedElement العنصر الذي تم حذفه و المخزن في المتغير id هنا قمنا بطباعة
document.write('Element with id equal "' + removedElement.id + '" is removed.');
</script>
</body>
</html>تبديل العنصر الإبن بعنصر آخر
يمكنك استخدام الدالة
إذاً يجب استدعائها من العنصر الأب و تمرير كائنين لها، الأول يمثل العنصر الجديد الذي سيتم وضعه و الثاني يمثل العنصر القديم الذي سيتم استبداله.
في المثال التالي قمنا بتبديل الوسم الذي يملك
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Replace Element</h1>
<div id="parent">
<p>The replaceElement() function can be used to replace a child element.</p>
<p id="child">This element will be replaced.</p>
</div>
<script>
// parent في المتغير parent يساوي id هنا قمنا بتخزين العنصر الذي يملك
var parent = document.getElementById('parent');
// oldChild في المتغير child يساوي id هنا قمنا بتخزين العنصر الذي يملك
var oldChild = document.getElementById('child');
// newChild و قمنا بتخزينه في المتغير <p> هنا قمنا بإنشاء وسم
var newChild = document.createElement('p');
// newChildText هنا قمنا بإنشاء نص يمكن وضعه في وسم و قمنا بتخزينه في المتغير
var newChildText = document.createTextNode('Replaced by Javascript.');
// newChild في newChildText هنا قمنا بإضافة
newChild.appendChild(newChildText);
// oldChild هنا قمنا بتديل الوسم الذي يمثله المتغير
// parent الموجود بداخل الوسم الذي يمثله المتغير
// newChild بالوسم الجديد الذي يمثله المتغير
parent.replaceChild(newChild, oldChild);
</script>
</body>
</html>