Create And Append Elements

const newDiv = document.createElement("div");

const newButton = document.createElement("button");
newButton.textContent = "اضغط هنا";
newButton.setAttribute("type", "button");
newButton.classList.add("btn");
newButton.id = "myButton";

<div id="container"></div>
// 1. إنشاء عنصر
const newP = document.createElement("p");

// 2. تعديل خصائصه
newP.textContent = "مرحباً بك في موقعي!";
newP.classList.add("welcome");

// 3. إضافته إلى الصفحة
const container = document.getElementById("container");
container.appendChild(newP);

const list = document.createElement("ul");

for (let i = 1; i <= 3; i++) {
  const li = document.createElement("li");
  li.textContent = `عنصر رقم ${i}`;
  list.appendChild(li);
}

document.body.appendChild(list);

const card = document.createElement("div");
card.classList.add("card");

const title = document.createElement("h2");
title.textContent = "عنوان";

const desc = document.createElement("p");
desc.textContent = "هذا وصف العنصر";

const btn = document.createElement("button");
btn.textContent = "تفاصيل";
btn.classList.add("btn");

// إضافة الأبناء إلى الكرت
card.append(title, desc, btn);

// أخيرًا إضافته للصفحة
document.body.appendChild(card);