Lesson 5 / الدرس 5

Creating and removing elements / إنشاء العناصر وإزالتها

Building a list from data is the most common thing a page does. Doing it by creating elements rather than joining strings is what makes it safe.

بناء قائمة من بيانات أشيع ما تفعله صفحة. وفعله بإنشاء عناصر لا بوصل نصوص هو ما يجعله آمنًا.

Create, fill, attach

const li = document.createElement('li');   1. make it (not on the page yet)
li.textContent = product.name;             2. fill it — safely
list.append(li);                           3. put it on the page

li.remove();                               and to take it away again

Three steps, always in that order. Step 2 is where the safety comes from: the name goes in as text, so it cannot become markup no matter what it contains. Run the demonstration to build a list from data.

The third product in that list has a bold tag in its name and appears as text, exactly as written. That is the whole argument for this approach over building an HTML string: with createElement and textContent, data and markup are separated by construction rather than by remembering to escape.

والمنتج الثالث في تلك القائمة في اسمه وسم عريض ويظهر نصًا كما كُتب بالضبط. وتلك هي الحجة كلها لهذا النهج على بناء نص HTML: فمع createElement وtextContent تُفصل البيانات عن الوسوم بالبناء لا بتذكّر التهريب.

Where to put it, and how to take it away

To do this	Write
Add at the end	parent.append(el)
Add at the start	parent.prepend(el)
Add before a specific element	other.before(el)
Replace everything inside	parent.replaceChildren(a, b)
Empty it	parent.replaceChildren()
Remove one element	el.remove()
Copy an element	el.cloneNode(true)

append takes several things at once and accepts plain strings as well as elements, which is often exactly what you want: li.append(name, " — ", price). Strings passed this way are inserted as text, so they are safe too.

وappend يأخذ أشياء عدة معًا ويقبل نصوصًا عادية كما يقبل عناصر، وهو ما تريده بالضبط غالبًا: li.append(name, " — ", price). والنصوص الممرَّرة هكذا تُدرَج نصًا، فهي آمنة أيضًا.

وإضافة العناصر واحدًا واحدًا داخل حلقة طويلة تجعل المتصفح يعيد حساب التخطيط مرارًا، وعلى بضعة آلاف صف تتلعثم الصفحة بوضوح. ابنِ المجموعة كلها أولًا وألحقها مرة — إما بجمعها واستدعاء append بها كلها، وإما بالبناء في DocumentFragment. وفي عشرين صفًا لا يهم؛ وفي ألفين هو الفرق بين الفوري وثانية مجمّدة.

A pattern worth learning now, because it structures every list-building page you will write: one function that takes one item of data and returns one element, and a loop that calls it. The function is testable on its own, the loop is three lines, and re-rendering after a change is replaceChildren plus the same loop. Almost every framework you meet later is an elaboration of exactly that shape.

ونمط يستحق التعلم الآن لأنه يبني كل صفحة قوائم ستكتبها: دالة واحدة تأخذ عنصر بيانات واحدًا وتعيد عنصرًا واحدًا، وحلقة تستدعيها. فالدالة قابلة للاختبار وحدها، والحلقة ثلاثة أسطر، وإعادة العرض بعد تغيير هي replaceChildren مع الحلقة نفسها. وكل إطار ستقابله لاحقًا تقريبًا توسيع لذلك الشكل بالضبط.

Try it live / جرّب بنفسك

<ul id="list"></ul>
<button id="add">Add</button>
<button id="clear">Clear</button>

<script>
  const items = [
    { name: 'One', price: 10 },
    { name: '<b>Two</b>', price: 20 }
  ];

  const list = document.getElementById('list');

  function makeRow(item) {
    const li = document.createElement('li');
    li.textContent = item.name;
    return li;
  }

  for (const item of items) { list.append(makeRow(item)); }
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why build a list with createElement rather than an HTML string?

لماذا تبني قائمة بـcreateElement لا بنص HTML؟

2. What is wrong with appending inside a loop over two thousand rows?

3. What is the pattern that structures most list-building pages?

Your task / مهمتك

Take an array of at least six objects and render it as a list on the page, using one function that turns one object into one element. Add a button that adds a new item and one that clears the list. Include one item whose text contains a tag, and show that it appears as text. Then build the same list by joining an HTML string instead, and show what that item does differently.

خذ مصفوفة من ستة كائنات على الأقل واعرضها قائمةً في الصفحة، مستخدمًا دالة واحدة تحوّل كائنًا إلى عنصر. وأضف زرًا يضيف عنصرًا جديدًا وآخر يمسح القائمة. وأدرج عنصرًا نصه فيه وسم، وأظهر أنه يظهر نصًا. ثم ابنِ القائمة نفسها بوصل نص HTML بدلًا من ذلك، وأظهر ما يفعله ذلك العنصر بشكل مختلف.

One function turning one object into one element دالة واحدة تحوّل كائنًا إلى عنصر
Add and clear both working الإضافة والمسح كلاهما يعمل
An item containing a tag, shown as text عنصر يحوي وسمًا معروضًا نصًا
The string version shown behaving differently صيغة النص معروضة وهي تتصرف بشكل مختلف