Назария

Сохтани элементҳо ва рӯйхатҳо

Саҳифа аз маълумот

Дар барномаҳои ҳақиқӣ рӯйхати молҳо, паёмҳо ё вазифаҳо пешакӣ дар HTML навишта нашудааст — он ҳамчун массиви маълумот меояд, ва JavaScript худаш аз он элементҳо месозад. Молро ба сабад илова карданд — дар массив як объект зиёд шуд, ва дар саҳифа сатри нав пайдо шуд.

createElement

Элементи нав «дар ҳаво» сохта мешавад ва ҳанӯз намоён нест:

const li = document.createElement("li");   // <li></li>
li.textContent = "Нон харидан";
li.classList.add("task");
li.dataset.id = "7";

Барои он ки пайдо шавад, онро ба элементе, ки аллакай дар саҳифа аст, гузоштан лозим.

Ба куҷо гузоштан

const list = document.querySelector("#todo");

list.append(li);        // ба охири list
list.prepend(li);       // ба аввали list
list.before(li);        // пеш аз list (ҳамчун ҳамсоя)
list.after(li);         // пас аз list
list.append(a, b, "матн");   // якчандторо якбора, сатрҳо матн мешаванд

Як элемент дар ду ҷо истода наметавонад: агар li-и аллакай гузошташударо боз гузоред, вай ба ҷои нав мекӯчад.

Хориҷ кардан ва тоза кардан

li.remove();                 // элементро аз саҳифа хориҷ кардан
list.replaceChildren();      // ҳамаи фарзандонро хориҷ кардан
list.innerHTML = "";         // ҳамон чиз, ин ҳам зиёд вомехӯрад

Кашидани рӯйхат аз массив

Усули аз ҳама маъмул: функсияи render, ки контейнерро тоза мекунад ва онро аз рӯи массив аз нав месозад. Маълумот тағйир ёфт — render()-ро боз даъват карданд.

const tasks = ["Зарф шустан", "Дарс тайёр кардан", "Сайр кардан"];

function render() {
  const list = document.querySelector("#todo");
  list.replaceChildren();
  for (const text of tasks) {
    const li = document.createElement("li");
    li.textContent = text;
    list.append(li);
  }
}

render();
tasks.push("Китоб хондан");
render();

Ҳама чизро аз нав сохтан нисбат ба ёфтан ва иваз кардани бандҳои алоҳида соддатар аст, ва барои рӯйхатҳои хурд ин зуд аст. Маҳз ҳамин идея — «интерфейс функсияи маълумот аст» — баъдтар дар React ва Vue ба камол мерасад.

Чаро на бо сатр тавассути innerHTML

Нишонагузориро бо сатр ҷамъ кардан мумкин аст:

list.innerHTML = tasks.map((t) => `<li>${t}</li>`).join("");

Ин кӯтоҳ, вале хатарнок аст: агар матн аз корбар омада бошад ва тегҳо дошта бошад, онҳо иҷро мешаванд (XSS). createElement + textContent ҳамеша бехатаранд — тегҳо дар матн ҳамчун матн мемонанд. Сатрҳо бо innerHTML танҳо барои нишонагузории худ, ки пешакӣ маълум аст, ҷоизанд.

Тугма дар дохили элементи сохташуда

Коркардкунандаҳоро ба элементҳо дарҳол пас аз сохтан овехтан мумкин аст — замима (closure) дар хотир медорад, ки тугма ба кадом банд тааллуқ дорад:

function addTask(text) {
  const li = document.createElement("li");
  li.append(text + " ");

  const done = document.createElement("button");
  done.textContent = "✓";
  done.addEventListener("click", () => li.classList.toggle("done"));

  li.append(done);
  document.querySelector("#todo").append(li);
}

Ҳар li тугмаи худро дорад, ва ҳар тугма li-и худро дар хотир медорад.

Хулоса

document.createElement("тег") — элементи нав; то гузошта нашавад, намоён нест.
append / prepend / before / after — гузоштан; remove() — хориҷ кардан; replaceChildren() — тоза кардан.
Рӯйхат аз массив: контейнерро тоза кардан ва элементҳоро дар давра сохтан — функсияи render().
Матни корбар — танҳо тавассути textContent, на тавассути innerHTML.