# JavaScript DOM: element yaratish va joylashtirish
> createElement bilan element yaratish, append va prepend, insertBefore, o'chirish va nusxalash. innerHTML xavfi va DocumentFragment bilan tez chizish.
Manba: https://learncode.uz/javascript/dom-yaratish/
Sana: 2026-06-05
[DOM'ni o'zgartirish](https://learncode.uz/javascript/dom-ozgartirish) darsida mavjud elementlarni
tahrirladik. Endi **yangi** element yaratamiz — bu serverdan kelgan ma'lumotni
sahifada ko'rsatishning asosiy yo'li.
## Element yaratish
```js
const p = document.createElement("p");
p.textContent = "Men JavaScript bilan yaratildim";
p.className = "comment";
document.querySelector("#box").append(p);
console.log(document.querySelector("#box").innerHTML);
```
```html
```
Uch qadam: yaratish → to'ldirish → **joylashtirish**. Uchinchisisiz element
xotirada qoladi, ekranda ko'rinmaydi.
## append va prepend
```js
const ul = document.querySelector("#list");
const end = document.createElement("li");
end.textContent = "Oxirgi";
ul.append(end);
const startTime = document.createElement("li");
startTime.textContent = "Birinchi";
ul.prepend(startTime);
console.log(ul.textContent);
```
```html
```
`append` — oxiriga, `prepend` — boshiga. Ikkalasi bir necha elementni va
matnni birdan qabul qiladi:
```js
const a = document.createElement("b");
a.textContent = "qalin";
const b = document.createElement("i");
b.textContent = "qiya";
document.querySelector("#box").append(a, " va ", b);
console.log(document.querySelector("#box").innerHTML);
```
```html
```
## Yoniga joylashtirish
```js
const center = document.querySelector("#center");
center.insertAdjacentHTML("beforebegin", "Oldin
");
center.insertAdjacentHTML("afterend", "Keyin
");
console.log(document.querySelector("#box").innerHTML);
```
```html
```
To'rt joy bor: `beforebegin` (element oldiga), `afterbegin` (ichiga, boshiga),
`beforeend` (ichiga, oxiriga), `afterend` (element keyiniga).
## O'chirish va almashtirish
```js
const ul = document.querySelector("#list");
ul.children[1].remove();
console.log("O'chirgandan keyin:", ul.children.length);
const fresh = document.createElement("li");
fresh.textContent = "Almashtirilgan";
ul.children[0].replaceWith(fresh);
console.log(ul.textContent.trim());
```
```html
- Birinchi
- Ikkinchi
- Uchinchi
```
## innerHTML — qulay, lekin xavfli
```js
const box = document.querySelector("#box");
box.innerHTML = "Tez va qisqa
";
console.log(box.innerHTML);
box.innerHTML += "Yana bitta
";
console.log(box.children.length);
```
```html
```
Foydalanuvchi kiritgan matnni `innerHTML` ga qo'ysangiz, u yerdagi HTML
**bajariladi** — bu XSS hujumiga yo'l ochadi:
```js
const comment = "
";
box.innerHTML = comment; // ❌ kod ishga tushadi
box.textContent = comment; // ✅ plain text sifatida ko'rinadi
```
Qoida: tashqaridan kelgan har qanday matn uchun `textContent` ishlating.
Farqni ko'ring:
```js
const unsafe = "qalin matn";
document.querySelector("#a").innerHTML = unsafe;
document.querySelector("#b").textContent = unsafe;
console.log("innerHTML:", document.querySelector("#a").textContent);
console.log("textContent:", document.querySelector("#b").textContent);
```
```html
```
## Ro'yxat chizish — amaliy naqsh
```js
const students = [
{ name: "Aziz", score: 85 },
{ name: "Dilnoza", score: 92 },
{ name: "Bobur", score: 78 },
];
const ul = document.querySelector("#students");
for (const t of students) {
const li = document.createElement("li");
li.textContent = t.name + " — " + t.score + " ball";
li.dataset.score = t.score;
if (t.score >= 85) li.style.fontWeight = "bold";
ul.append(li);
}
console.log("Chizildi:", ul.children.length, "ta");
console.log(ul.children[1].dataset.score);
```
```html
```
Bu [fetch](https://learncode.uz/javascript/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:
```js
const ul = document.querySelector("#katta");
const startTime = Date.now();
const fragment = document.createDocumentFragment();
for (let i = 1; i <= 1000; i++) {
const li = document.createElement("li");
li.textContent = "Qator " + i;
fragment.append(li);
}
ul.append(fragment);
console.log("Elementlar:", ul.children.length);
console.log("Vaqt:", Date.now() - startTime, "ms");
```
```html
```
`DocumentFragment` — sahifaga tegmaydigan vaqtinchalik idish. U joylashtirilganda
o'zi yo'qoladi, faqat bolalari qoladi.
## Nusxalash
```js
const original = document.querySelector("#original");
const shallow = original.cloneNode(false);
const deep = original.cloneNode(true);
console.log("shallow:", shallow.innerHTML === "");
console.log("deep:", deep.innerHTML);
document.querySelector("#joy").append(deep);
```
```html
```
`cloneNode(true)` — ichidagilari bilan, `false` — faqat elementning o'zi.
## Amaliy mashq
1. `createElement` bilan paragraf yaratib, sahifaga qo'shing;
2. `append` va `prepend` farqini ro'yxatda ko'ring;
3. massivdan `` ro'yxati chizing;
4. `insertAdjacentHTML` ning to'rt joyini sinang;
5. bir elementni `replaceWith` bilan almashtiring;
6. `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](https://learncode.uz/javascript/devtools) —
kodni tekshirish vositalari.