سلام! با استفاده از جاوا اسکریپت، نه تنها می توانید عناصر را در یک صفحه پیدا کنید (در مورد نحوه انجام این کار بخوانید) بلکه عناصر را به صورت پویا ایجاد کرده و آنها را به DOM اضافه کنید. نحوه انجام این کار در این درس مورد بحث قرار خواهد گرفت.

به منظور ایجاد عنصر جدیددر یک صفحه وب - شی سند دارای روش های زیر است:

• createElement(elementName): یک عنصر جدید ایجاد می کند، هر تگ صفحه HTML باید به عنوان یک پارامتر ارسال شود، یک عنصر HTML را برمی گرداند.
• createTextNode(text): یک گره متنی ایجاد می کند و همان را برمی گرداند.

افزودن یک عنصر

بیایید به یک مثال کوچک نگاه کنیم:

Var el = document.createElement("div"); var elText = document.createTextNode("سلام جهان");

همانطور که از مثال می بینید، متغیر elem پیوندی به عنصر div جدید ذخیره می کند. با این حال، همانطور که می دانید، ایجاد عناصر کافی نیست، آنها هنوز هم باید به صفحه وب اضافه شوند. به هر حال، وقتی عناصر را به این شکل ایجاد می کنیم، به نظر می رسد که آنها در فضای مجازی یا در حافظه هستند، اما برای نمایش آنها در یک صفحه وب، روش های خاصی وجود دارد.

روش های زیر برای افزودن عناصر به یک صفحه وب استفاده می شود:

• appendChild(newNode): یک عنصر جدید به انتهای عنصری که این متد فراخوانی شده است اضافه می کند.
• insertBefore(newNode, referenceNode): یک گره جدید قبل از گره مشخص شده به عنوان پارامتر دوم اضافه می کند.

بیایید به مثالی از پیوست کردن یک عنصر به یک صفحه وب با استفاده از روش appendChild نگاه کنیم:

عنوان مقاله

پراگراف اول

پاراگراف دوم

var article = document.querySelector("div.article"); // ایجاد یک عنصر var el = document.createElement("h3"); // برای آن متن ایجاد کنید var elTxt = document.createTextNode("Hello world"); // اضافه کردن متن به عنصر به عنوان عنصر فرزند el.appendChild(elTxt); // یک عنصر به بلوک div اضافه کنید article.appendChild(el);

مثال یک عنصر هدر معمولی h3 و یک گره متنی ایجاد کرد. سپس گره متن به عنصر عنوان اضافه می شود. سپس عنوان به یکی از عناصر صفحه وب اضافه می شود تا در صفحه دیده شود.

اما اصلاً لازم نیست که یک گره متن اضافی برای ایجاد متن در یک عنصر داشته باشید؛ برای این کار، ویژگی textContent وجود دارد که به شما امکان می دهد مستقیماً متن را به یک عنصر اختصاص دهید.

Var el = document.createElement("h3"); el.textContent = "سلام من عنوان هستم";

در این حالت متن هنگام تنظیم مستقیم متن به طور ضمنی ایجاد می شود.

و بیایید نحوه اضافه کردن این عنصر را به ابتدای مجموعه ای از گره های فرزند یک div نیز بررسی کنیم:

Var artDiv = document.querySelector("div.article"); // ایجاد یک عنصر var el = document.createElement("h2"); // برای آن متن ایجاد کنید var eltxt = document.createTextNode("Hello world"); // اضافه کردن متن به عنصر به عنوان عنصر فرزند el.appendChild(eltxt); // اولین عنصر را دریافت کنید که قبل از جمع اضافه می شود var firstEl = artDiv.firstChild.nextSibling; // قبل از اولین گره یک عنصر به بلوک div اضافه کنید artDiv.insertBefore(el, firstEl);

اگر ناگهان نیاز به اضافه کردن یک گره جدید به مکان دوم، سوم یا هر مکان دیگری دارید، باید گرهی را پیدا کنید که قبل از آن باید آن را با استفاده از ویژگی های firstChild/lastChild یا nextSibling/previousSibling درج کنید.

کپی کردن یک عنصر

شرایطی وجود دارد که عناصر از نظر ترکیب بسیار پیچیده هستند و کپی کردن آنها آسان تر است. برای این کار از یک متد ()cloneNode جداگانه استفاده می شود.

Var artDiv = document.querySelector("div.article"); // کلون عنصر articleDiv var newArtDiv = artDiv.cloneNode(true); // اضافه کردن به انتهای عنصر بدن document.body.appendChild(newArtDiv);

شما باید یک مقدار Boolean را به عنوان پارامتر به متد ()cloneNode ارسال کنید: اگر true را ارسال کنید، عنصر به همراه تمام گره‌های فرزند کپی می‌شود. اگر false را ارسال کنید، بدون گره های فرزند کپی می شود. که در در این مثالعنصر را به همراه محتویات آن کپی کرده و به انتهای صفحه وب اضافه می کنیم.

حذف یک عنصر

برای حذف یک عنصر، باید متد removeChild() را فراخوانی کنید. این روش یکی از گره های فرزند را حذف می کند:

Var artDiv = document.querySelector("div.article"); // گره ای را که حذف خواهیم کرد پیدا کنید - پاراگراف اول var removNode = document.querySelectorAll("div.article p"); // حذف گره artDiv.removeChild(removNode);

این مثال اولین پاراگراف را از بلوک div حذف می کند

جایگزینی یک عنصر

برای جایگزینی یک عنصر با عنصر دیگر، از روش replaceChild(newNode, oldNode) استفاده کنید. این روش یک عنصر جدید را به عنوان پارامتر اول می گیرد که جایگزین عنصر قدیمی ارسال شده به عنوان پارامتر دوم می شود.

Var artDiv = document.querySelector("div.article"); // گره ای را که جایگزین خواهیم کرد پیدا کنید - پاراگراف اول var old = document.querySelectorAll("div.article p"); // ایجاد یک عنصر var new = document.createElement("h3"); // برای آن متن ایجاد کنید var elemtxt = document.createTextNode("Hello world"); // اضافه کردن متن به عنصر به عنوان عنصر فرزند new.appendChild(elemtxt); // جایگزین گره قدیمی با یک گره جدید artDiv.replaceChild(new, old);

در این مثال، اولین پاراگراف را با عنوان h2 که به تازگی ایجاد کردیم جایگزین می کنیم.

نتایج.

برای ایجاد یک عنصر از روش های زیر استفاده می شود:

document.createElement(tag) - یک عنصر جدید ایجاد می کند.

document.createTextNode(text) - یک گره متنی ایجاد می کند

روش های درج و حذف گره ها

• parent.appendChild(el) - یک عنصر را به انتهای یک عنصر موجود اضافه می کند
• parent.insertBefore(el, nextSibling) - یک عنصر را قبل از یک عنصر موجود درج می کند
• parent.removeChild(el) - یک عنصر را حذف می کند
• parent.replaceChild(newElem، el) - یک عنصر را با عنصر دیگری جایگزین می کند
• parent.cloneNode(bool) - یک عنصر را کپی می کند، اگر پارامتر bool=true باشد، عنصر با تمام عناصر فرزند کپی می شود و اگر غلط باشد، بدون عناصر فرزند کپی می شود.

وظایف عملکرد درج عناصر

یک تابع insertAfter(newEl,oldEl) بنویسید که یکی پس از دیگری در خود تابع وارد می شود، خود عناصر به عنوان پارامتر ارسال می شوند.

اگر تا به حال جاوا اسکریپت نوشته اید و مجبور شده اید چیزی شبیه به:
var p = document.createElement("p");
p.appendChild(document.createTextNode("ماهی واقعی."));
var div = document.createElement("div");
div.setAttribute("id"، "new");
div.appendChild(p);

سپس این ممکن است برای شما مفید باشد.

مشکل: وقتی بیش از یک عنصر را در داخل یکدیگر ایجاد می کنید، کد بسیار پیچیده می شود.

من یک ابزار ساده برای حل مشکل ارائه می دهم - تابع create() (کد منبع زیر). به عنوان مثال، بیایید یک پاراگراف از متن ایجاد کنیم:
var el = ایجاد ("p", ( ), "وداع، عشق!");

یا یک div با یک پاراگراف و یک لینک در داخل آن:
var div = ایجاد ("div"، ( شناسه: "جدید"، سبک: "پس‌زمینه:#fff")،
create("p", ( align: "center" ),
"معرفی: "،
create("a"، ( href: "ua.fishki.net/picso/kotdavinchi.jpg")،
"تصویر")
": پایان")
);

یا در اینجا جدولی درست می کنیم:
var holder = document.getElementById("holder2");
جدول var;
var td;
holder.appendChild(
جدول =
create("جدول", (id: "زشت"، cols:3)
ایجاد ("tbody"، ()
ایجاد ("tr"، ()
create("td", ( عرض: "10%" )
"سلام")،
td =
create("td", (سبک: "پس زمینه: #fcc")،
"آنجا")
create("td"، (کلاس: "special2")، "Everywhere")
)
);

لطفاً توجه داشته باشید: 1. IE به یک عنصر tbody نیاز دارد، در غیر این صورت از نمایش جدول خودداری می کند.
2. صفت class با چیزی در تضاد است، بنابراین باید آن را به عنوان Class بنویسید. به نظر می رسد که این هیچ تأثیری در نتیجه ندارد.
3. table = و tr = در مثال به شما امکان می دهد اشیاء تودرتو ایجاد شده را برای کار بیشتر با آنها ذخیره کنید.
4. این کد در اینترنت اکسپلورر، موزیلا و اپرا کار می کند. تابع خود ایجاد (نام، ویژگی ها)
var el = document.createElement(name);
if (نوع ویژگی == "شیء") (
برای (var i در صفات) (
el.setAttribute(i، صفات[i]);

اگر (i.toLowerCase() == "کلاس") (
el.className = ویژگی[i]; // برای سازگاری با اینترنت اکسپلورر

) else if (i.toLowerCase() == "سبک") (
el.style.cssText = صفات[i]; // برای سازگاری با اینترنت اکسپلورر
}
}
}
برای (var i = 2;i< arguments.length; i++) {
var val = آرگومان ها[i];
if (نوع val == "رشته") ( val = document.createTextNode(val) );
el.appendChild(val);
}
بازگشت el;
}

ما باید از ایوان کورمانوف برای ایده تشکر کنیم،
مقاله اصلی با نمونه های کاری:

حذف عنصر js (12)

مرحله 1. عناصر را آماده کنید:

var element = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = element.parentNode;

مرحله 2. اضافه کردن پس از:

elementParent.insertBefore(newElement, element.nextSibling);

جاوا اسکریپت دارای insertBefore() است اما چگونه می توانم یک عنصر را وارد کنم بعد ازعنصر دیگری بدون استفاده از jQuery یا کتابخانه دیگری؟

جاوا اسکریپت ساده خواهد بود:

اضافه کردن:

Element.parentNode.insertBefore(newElement, element);

اضافه کردن بعد:

Element.parentNode.insertBefore(newElement, element.nextSibling);

اما، برای سهولت استفاده، چند نمونه اولیه را در آنجا قرار دهید

با ایجاد نمونه های اولیه زیر، می توانید این تابع را مستقیماً از عناصر ایجاد شده جدید فراخوانی کنید.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) نمونه اولیه

Element.prototype.appendBefore = تابع (عنصر) ( element.parentNode.insertBefore(this, element); ),false;

.appendAfter(element)Prototype

Element.prototype.appendAfter = تابع (عنصر) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

و برای مشاهده عملی آن، قطعه کد زیر را اجرا کنید

/* عنصر BEFORE NeighborElement را اضافه می کند */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* عنصر AFTER NeighborElement را اضافه می کند */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* ایجاد و تنظیم معمولی یک شیء عنصر یتیم جدید */ var NewElement = document.createElement("div"); NewElement.innerHTML = "عنصر جدید"; NewElement.id = "NewElement"; /* افزودن NewElement قبل از -OR- AFTER با استفاده از نمونه های اولیه فوق الذکر */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( text-align: center; ) #Neighborhood ( رنگ: قهوه ای؛ ) #NewElement (رنگ: سبز؛ ) Neighbor 1 Neighbor 2 Neighbor 3

ایده آل insertAfter باید شبیه به MDN کار کند. کد زیر به صورت زیر عمل می کند:

• اگر فرزندی وجود نداشته باشد، یک گره جدید اضافه می شود
• اگر Node مرجعی وجود نداشته باشد، یک Node جدید اضافه می شود
• اگر بعد از گره مرجع یک Node وجود داشته باشد، یک گره جدید اضافه می شود
• اگر گره ارجاع شده دارای فرزند باشد، گره جدید قبل از آن خواهر یا برادر درج می شود
• یک Node جدید برمی گرداند

پسوند گره

Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; );

یک مثال کلی

Node.parentNode.insertAfter(newNode, node);

اجرای کد را ببینید

// ابتدا Node.prototype.insertAfter = function(node, referenceNode) را گسترش دهید ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode، newNode; newNode = document.createElement("li") newNode.innerText = "اولین مورد جدید"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "دومین مورد جدید"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "سومین مورد جدید"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode، referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "چهارمین مورد جدید"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode، referenceNode); بدون فرزند بدون گره مرجع

• مورد اول

بدون خواهر و برادر بعد

• مورد اول

خواهر و برادر بعد از

• مورد اول
• مورد سوم

متد insertBefore() مانند parentNode.insertBefore() استفاده می شود. بنابراین برای شبیه سازی این و ایجاد متد ()parentNode.insertAfter می توانیم کد زیر را بنویسیم.

Node.prototype.insertAfter = function(newNode، referenceNode) ( referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling) را برمی گرداند؛ // بر اساس راه حل karim79)؛ // گرفتن دسته های مورد نیاز var refElem = document.getElementById(" pTwo")؛ var parent = refElem.parentNode؛ // ایجاد

بند سه

var txt = document.createTextNode("بند سه"); var paragraph = document.createElement("p"); paragraph.appendChild(txt); // اکنون می‌توانیم آن را مانند insertBefore() parent.insertAfter(paragraph, refElem) صدا کنیم.

بند یک

بند دو

توجه داشته باشید که گسترش DOM ممکن است راه حل مناسبی برای شما نباشد، همانطور که در این مقاله بیان شد.

با این حال، این مقاله در سال 2010 نوشته شده است و ممکن است همه چیز در حال حاضر متفاوت باشد. پس خودت تصمیم بگیر

به شما امکان می دهد تمام سناریوها را مدیریت کنید

تابع insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild(newNode); (!referenceNode.nextSibling) document.body.appendChild(newNode)؛ در غیر این صورت referenceNode.parentNode.insertBefore(newNode، referenceNode.nextSibling)؛ )

این کد برای درج یک عنصر پیوند درست بعد از آخرین فرزند موجود در داخل یک فایل کوچک css کار می کند

Var raf, cb=function())( //create newnode var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"؛ //درج بعد از آخرین گره var nodes=document.getElementsByTagName("پیوند")؛ //گره های موجود var lastnode=document.getElementsByTagName("link")؛ lastnode.parentNode.insertBefore(پیوند، آخرین گره. خواهر بعدی)); //قبل از درج بررسی کنید try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)(raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

من می دانم که در حال حاضر پاسخ های زیادی برای این سوال وجود دارد، اما هیچ یک از آنها شرایط دقیق من را برآورده نکردند.

من به تابعی نیاز دارم که دقیقاً رفتار مخالف parentNode.insertBefore داشته باشد - یعنی باید یک referenceNode تهی را بپذیرد (که در پاسخ پذیرفته نمی شود) و جایی که insertBefore در آن درج شود. پایاندرج قبل از آن که باید به آن وارد کند شروع، زیرا در غیر این صورت هیچ راهی برای چسباندن به مکان اصلی با این تابع وجود نخواهد داشت. به همین دلیل insertBefore در انتها قرار می گیرد.

از آنجایی که یک referenceNode تهی به شما نیاز دارد که قبل از والد وارد کنید، ما باید والد را بدانیم - insertBefore متدی از parentNode است، بنابراین به این ترتیب به node والد دسترسی دارد. تابع ما وجود ندارد، بنابراین باید عنصر والد را به عنوان پارامتر ارسال کنیم.

تابع حاصل به صورت زیر است:

تابع insertAfter(parentNode، newNode، referenceNode) (parentNode.insertBefore(newNode، referenceNode ? referenceNode.nextSibling: parentNode.firstChild)؛ )

اگر (! Node.prototype.insertAfter) ( Node.prototype.insertAfter = تابع (newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); )

node1.after(node2) ایجاد می کند،

جایی که node1 و node2 گره های DOM هستند.

در این پست می خواهم به شما بگویم که چگونه یک عنصر را از یک شی در جاوا اسکریپت اضافه یا حذف کنید. این بسیار ساده است، اما بسیاری از مبتدیان، مانند من قبلا، اغلب در مورد آن گیج می شوند.

بیایید یک شی بسازیم برای مثال var obj = ( name: "alex", last_name: "petrov", website: "site", );

ما یک شی ساده داریم که حاوی داده هایی مانند نام، نام خانوادگی و وب سایت است. داده ها می توانند مطلقاً هر چیزی باشند، اما برای اهداف این پست دقیقاً همین خواهد بود.

افزودن یک عنصر جدید obj.country = "ru"; // اضافه خواهد کرد کلید جدید"country" به یک شی با مقدار "ru" obj["city"] = "Moscow"; // همچنین یک کلید جدید اضافه می کند، فقط "شهر" با مقدار "Moscow"

کد بالا واضح است، اما فقط برای روشن شدن: می توانید با استفاده از "" مقادیر جدیدی به یک شی در نحو شی اضافه کنید. و کلید یا فرمت آرایه معمولی. اگر آن را به عنوان یک آرایه اعلام کنید، آنگاه obj همچنان یک شی است، زیرا قبلاً به لطف () آن را به این شکل تعیین کرده اید.

ایجاد یک شی در داخل یک شی obj.other_obj = (); // یک مقدار جدید other_obj در obj ایجاد کنید و آن را به یک شی تبدیل کنید

حالا بیایید چند داده را در آنجا اضافه کنیم:

Obj.other_obj.first = "اولین کلید شی جدید"; obj.other_obj.second = "دوم";

ما دو مقدار جدید، اول و دوم، در داخل other_obj ایجاد کردیم.

حذف یک عنصر delete obj.name; // برمی گرداند: درست است

می توانید از delete استفاده کنید که می تواند عناصر را از اشیا حذف کند. شما نمی توانید کل شی را به این ترتیب حذف کنید، اما اگر نیاز دارید، می توانید این کار را انجام دهید:

Obj = (); // دوباره شی را خالی می کند

این همه است، اگر هنوز سؤالی در مورد اشیاء در جاوا اسکریپت دارید، یک نظر در زیر بنویسید، من سعی خواهم کرد به شما کمک کنم.

این قسمت چهارم از پست‌هایی است که به معادل‌های بومی متدهای jQuery اختصاص دارد. ممکن است بخواهید قبل از ادامه این مطلب را بخوانید.

در این مقاله به روش های ایجاد، درج، جابجایی و حذف عناصر می پردازیم. و اگرچه jQuery در حال حاضر شامل تعداد زیادی روش مفید است، از این که بدانید همه اینها را می توان به راحتی با استفاده از روش های بومی انجام داد، شگفت زده خواهید شد.

دستکاری کد HTML عناصر جی کوئری // get var html = $(elem).html(); // set $(elem).html("HTML جدید"); Native JS // دریافت var html = elem.innerHTML; // set elem.innerHTML = "HTML جدید"; دستکاری متن عنصر jQuery // دریافت var text = $(elem).text(); // set $(elem).text("متن جدید"); Native JS // دریافت var text = elem.textContent; // set elem.textContent = "متن جدید"; ایجاد یک عنصر jQuery $(""); Native JS document.createElement("div"); محتوا را به انتهای عناصر jQuery اضافه می کند $(parentNode).append(newNode); Native JS parentNode.appendChild(newNode); محتوا را به ابتدای عناصر jQuery اضافه می کند $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // یا referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+، IE8+ مستقیماً قبل از عنصر jQuery $(referenceNode).before(newNode); JS Native referenceNode.parentNode.insertBefore(newNode، referenceNode); // یا referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+، IE8+ مستقیماً بعد از عنصر jQuery $(referenceNode).after(newNode) وارد کنید. Native JS referenceNode.parentNode.insertBefore(newNode، referenceNode.nextElementChild); // یا referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+، IE8+

توجه: «قبل از شروع» و «پس از پایان» تنها در صورتی کار خواهند کرد که referenceNode در درخت DOM باشد و یک عنصر والد داشته باشد.

به موارد زیر نگاه کنید:

ReferenceNode.insertAdjacentElement(موقعیت، گره);

متد insertAdjacentElement دو پارامتر دارد:

• موقعیت - موقعیت نسبت به referenceNode، باید یکی از موارد زیر باشد:
  • "قبل از شروع" - قبل از خود عنصر.
  • "afterbegin" - داخل عنصر، قبل از اولین فرزند.
  • "قبل" - در داخل عنصر، پس از آخرین فرزند.
  • "afterend" - بعد از خود عنصر.
• گره - گره برای درج

محتوای متنی

مقداری متن مقداری متن var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("قبل از"، elem2); // نتیجه برخی از متن‌ها

روش insertAdjacentElement تمیزتر و شهودی تر از روش insertBefore است، اما روش دوم در مرورگرهای قدیمی بهتر پشتیبانی می شود.

چندین بار اضافه کردن عناصر

همچنین شایان ذکر است که افزودن یک عنصر به گره ای که در درخت DOM قرار دارد منجر به ترسیم مجدد می شود. این خیلی خوب نیست زیرا مرورگر باید اندازه و موقعیت عنصر جدید را مجدداً محاسبه کند، که همچنین منجر به تغییراتی در فرزندان، اجداد و عناصری که بعد از آن در DOM ظاهر می شوند، می شود. اگر عناصر زیادی را به DOM اضافه می کنید، ممکن است مدتی طول بکشد.

برای جلوگیری از این امر، می توانید آن را با DocumentFragment اضافه کنید. قطعه سند یک شی سند است که فقط در حافظه وجود دارد، بنابراین افزودن به آن باعث ایجاد جریان مجدد نمی شود.

فرض کنید باید 100 عنصر li را به عنصر ul که در درخت DOM وجود دارد اضافه کنیم:

// عنصری را دریافت کنید که شامل موارد ما باشد var ul = document.querySelector("ul"); // ایجاد 100 عنصر لیست برای (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

در مثال بالا، عناصر li مستقیماً به عنصر ul اضافه می‌شوند که در درخت DOM قرار دارد، از این رو در هر تکرار ترسیم مجدد ایجاد می‌شود - این 100 تغییر است!

بیایید راه بهتری پیدا کنیم.

// عنصری را دریافت کنید که شامل موارد ما باشد var ul = document.querySelector("ul"); // یک قطعه سند ایجاد کنید تا عناصر لیست را به var docFrag = document.createDocumentFragment(); // ایجاد 100 عنصر لیست برای (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

در همین مثال، عناصر li به قطعه سند در حافظه اضافه می شوند، به طوری که وقتی قطعه به عنصر ul اضافه می شود، جریان مجدد فعال می شود. این روش تعداد بارگیری مجدد را از 100 به 1 کاهش می دهد.

حذف یک عنصر جی کوئری $(referenceNode).remove(); JS Native referenceNode.parentNode.removeChild(referenceNode); // یا referenceNode.remove(); // FF 23.0+، 23.0+، Edge (بدون پشتیبانی از IE)