جافاسكربتإضافة / حذف عناصر

// 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);

// 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);

// mainElement في الصفحة في المتغير <main> هنا قمنا بتخزين أول وسم
var mainElement = document.getElementsByTagName('main')[0];

// mainElement هنا قمنا بتبديل كل المحتوى الموجود في العنصر الذي يمثله المتغير
mainElement.innerHTML = '<p>Content is totally replaced by <b>Javascript</b></p>';

// 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>');

// element في المتغير demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element هنا قمنا بإضافة كلمة بخط عريض في بداية الوسم الذي يمثله المتغير
element.insertAdjacentHTML('afterbegin', '<b>After Beginnig</b> - ');

// element هنا قمنا بإضافة كلمة بخط عريض في نهاية الوسم الذي يمثله المتغير
element.insertAdjacentHTML('beforeend',  ' - <b>Before End</b>');

// element في المتغير demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// من الصفحة element هنا قمنا بحذف الوسم الذي يمثله المتغير
element.remove();

// parentElement في المتغير parent يساوي id هنا قمنا بتخزين العنصر الذي يملك
var parentElement = document.getElementById('parent');

// childElement في المتغير child يساوي id هنا قمنا بتخزين العنصر الذي يملك
var childElement = document.getElementById('child');

// childElement هنا قمنا بحذف الوسم الذي يمثله المتغير
// parentElement الموجود بداخل الوسم الذي يمثله المتغير 
parentElement.removeChild(childElement);

var parentElement = document.getElementById('parent');
var childElement = document.getElementById('child');

// removedElement هنا قمنا بتخزين العنصر الذي حذفناه بداخل المتغير
var removedElement = parentElement.removeChild(childElement);

// removedElement العنصر الذي تم حذفه و المخزن في المتغير id هنا قمنا بطباعة
document.write('Element with id equal "' + removedElement.id + '" is removed.');

// 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);