ساخت و اضافه کردن المان های وب بوسیله جاوااسکریپت

در ادامه آموزش جاوااسکریپت برای ساخت و اضافه کردن المان ها و محتوا به صفحه وب بوسیله دستورات جاوااسکریپت دو مرحله اصلی داریم.

1-ساخت المان

2- اضافه کردن و چسباندن المان به صفحه وب

1- ساخت المان

برای ساخت المان به وسیله دستورات جاوااسکریپت از کد زیر استفاده می کنیم

document.createElement("elementName");

مثال

//create the elements
var newHeading = document.createElement("h1");
var newParagraph = document.createElement("p");

حال باید محتوای مورد نظر را بوسیله دستور innerHtml به المان اضافه کنیم

// to add content, either use innerHTML
newHeading.innerHTML = "Did You Know?";
newParagraph.innerHTML = "California produces over 17 million gallons of wine each year!";

روش دیگر ساخت محتوا به صورت آزاد و سپس اختصاص دادن آنها به المان های مورد نظر است. کد کلیدی appendChild و createTextNode

// OR create child nodes manually
var h1Text = document.createTextNode("Did You Know?");
var paraText = document.createTextNode("California produces over 17 million gallons of wine each year!");
// and add them as child nodes to the new elements
newHeading.appendChild(h1Text);
newParagraph.appendChild(paraText);

2- اضافه کردن و چسباندن المان به صفحه وب:

در نهایت باید المان های ایجاد شده را بوسیله دستورات appendChild و getElementById به صفحه وب اضافه کنیم.

// and we still need to attach them to the document!
document.getElementById("trivia").appendChild(newHeading);
document.getElementById("trivia").appendChild(newParagraph);

به این صورت، المان های ایجاد شده در متغیرهای newHeading و newParagraph را به المان مورد نظر با آیدی trivia در صفحه وب اضافه کردیم.

روش دیگر اضافه کردن المان جدید درون المان های موجود اسفاده از دستور insertBefore است. سینتکس این دستور به صورت زیر است

parentElemrent.insertBefore (newElement, existingElement);