JavaScript DOM: element yaratish va joylashtirish

DOM’ni o’zgartirish darsida mavjud elementlarni tahrirladik. Endi yangi element yaratamiz — bu serverdan kelgan ma’lumotni sahifada ko’rsatishning asosiy yo’li.

Element yaratish

JavaScript

const p = document.createElement("p");
p.textContent = "Men JavaScript bilan yaratildim";
p.className = "izoh";

document.querySelector("#quti").append(p);

console.log(document.querySelector("#quti").innerHTML);

Sahifa

Uch qadam: yaratish → to’ldirish → joylashtirish. Uchinchisisiz element xotirada qoladi, ekranda ko’rinmaydi.

append va prepend

JavaScript

const ul = document.querySelector("#royxat");

const oxiri = document.createElement("li");
oxiri.textContent = "Oxirgi";
ul.append(oxiri);

const boshi = document.createElement("li");
boshi.textContent = "Birinchi";
ul.prepend(boshi);

console.log(ul.textContent);

Sahifa

append — oxiriga, prepend — boshiga. Ikkalasi bir necha elementni va matnni birdan qabul qiladi:

JavaScript

const a = document.createElement("b");
a.textContent = "qalin";

const b = document.createElement("i");
b.textContent = "qiya";

document.querySelector("#quti").append(a, " va ", b);

console.log(document.querySelector("#quti").innerHTML);

Sahifa

Yoniga joylashtirish

JavaScript

const markaz = document.querySelector("#markaz");

markaz.insertAdjacentHTML("beforebegin", "<p>Oldin</p>");
markaz.insertAdjacentHTML("afterend", "<p>Keyin</p>");

console.log(document.querySelector("#quti").innerHTML);

Sahifa

To’rt joy bor: beforebegin (element oldiga), afterbegin (ichiga, boshiga), beforeend (ichiga, oxiriga), afterend (element keyiniga).

O’chirish va almashtirish

JavaScript

const ul = document.querySelector("#royxat");

ul.children[1].remove();
console.log("O'chirgandan keyin:", ul.children.length);

const yangi = document.createElement("li");
yangi.textContent = "Almashtirilgan";
ul.children[0].replaceWith(yangi);

console.log(ul.textContent.trim());

Sahifa

innerHTML — qulay, lekin xavfli

JavaScript

const quti = document.querySelector("#quti");

quti.innerHTML = "<p>Tez va qisqa</p>";
console.log(quti.innerHTML);

quti.innerHTML += "<p>Yana bitta</p>";
console.log(quti.children.length);

Sahifa

Foydalanuvchi matnini innerHTML'ga bermang

Foydalanuvchi kiritgan matnni innerHTML ga qo’ysangiz, u yerdagi HTML bajariladi — bu XSS hujumiga yo’l ochadi:

const izoh = "<img src=x onerror=\"alert('hujum')\">";
quti.innerHTML = izoh;   // ❌ kod ishga tushadi
quti.textContent = izoh; // ✅ oddiy matn sifatida ko'rinadi

Qoida: tashqaridan kelgan har qanday matn uchun textContent ishlating.

Farqni ko’ring:

JavaScript

const xavfli = "<b>qalin</b> matn";

document.querySelector("#a").innerHTML = xavfli;
document.querySelector("#b").textContent = xavfli;

console.log("innerHTML:", document.querySelector("#a").textContent);
console.log("textContent:", document.querySelector("#b").textContent);

Sahifa

Ro’yxat chizish — amaliy naqsh

JavaScript

const talabalar = [
{ ism: "Aziz", ball: 85 },
{ ism: "Dilnoza", ball: 92 },
{ ism: "Bobur", ball: 78 },
];

const ul = document.querySelector("#talabalar");

for (const t of talabalar) {
const li = document.createElement("li");
li.textContent = t.ism + " — " + t.ball + " ball";
li.dataset.ball = t.ball;

if (t.ball >= 85) li.style.fontWeight = "bold";

ul.append(li);
}

console.log("Chizildi:", ul.children.length, "ta");
console.log(ul.children[1].dataset.ball);

Sahifa

Bu fetch bilan kelgan ma’lumotni ko’rsatishning standart usuli.

DocumentFragment — ko’p element uchun

Har append sahifani qayta hisoblashga majbur qiladi. Ko’p element qo’shishda avval xotirada yig’ib, keyin bir marta joylashtirish tezroq:

JavaScript

const ul = document.querySelector("#katta");

const boshi = Date.now();

const parcha = document.createDocumentFragment();
for (let i = 1; i <= 1000; i++) {
const li = document.createElement("li");
li.textContent = "Qator " + i;
parcha.append(li);
}
ul.append(parcha);

console.log("Elementlar:", ul.children.length);
console.log("Vaqt:", Date.now() - boshi, "ms");

Sahifa

DocumentFragment — sahifaga tegmaydigan vaqtinchalik idish. U joylashtirilganda o’zi yo’qoladi, faqat bolalari qoladi.

Nusxalash

JavaScript

const asl = document.querySelector("#asl");

const sayoz = asl.cloneNode(false);
const chuqur = asl.cloneNode(true);

console.log("sayoz:", sayoz.innerHTML === "");
console.log("chuqur:", chuqur.innerHTML);

document.querySelector("#joy").append(chuqur);

Sahifa

cloneNode(true) — ichidagilari bilan, false — faqat elementning o’zi.

Amaliy mashq

createElement bilan paragraf yaratib, sahifaga qo’shing;
append va prepend farqini ro’yxatda ko’ring;
massivdan <li> ro’yxati chizing;
insertAdjacentHTML ning to’rt joyini sinang;
bir elementni replaceWith bilan almashtiring;
innerHTML va textContent ga bir xil HTML matn berib, farqni kuzating.

6-qadam xavfsizlik uchun eng muhim dars.

Qisqacha xulosa

createElement yaratadi, append/prepend joylashtiradi.
Joylashtirilmagan element ekranda ko’rinmaydi.
insertAdjacentHTML to’rt xil joyga qo’yish imkonini beradi.
remove() o’chiradi, replaceWith() almashtiradi.
Tashqi matn uchun doim textContent — innerHTML XSS xavfi.
Ko’p element uchun DocumentFragment tezroq.

Keyingi darsda DevTools bilan xatolarni topish — kodni tekshirish vositalari.