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

بیایید یک شی بسازیم برای مثال 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 = (); // دوباره شی را خالی می کند

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

حذف عنصر 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 هستند.

سلام! با با استفاده از جاوا اسکریپتشما نه تنها می توانید عناصر را در صفحه پیدا کنید (در مورد نحوه انجام این کار بخوانید) بلکه عناصر را به صورت پویا ایجاد کرده و آنها را به 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);

شما باید به عنوان پارامتر به متد ()cloneNode ارسال کنید مقدار بولی: اگر درست باشد، عنصر به همراه تمام گره های فرزند آن کپی می شود. اگر 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); // جایگزین کردن گره قدیمی new artDiv.replaceChild(جدید، قدیمی);

در این مثال، اولین پاراگراف را با عنوان 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) بنویسید که یکی پس از دیگری در خود تابع وارد می شود، خود عناصر به عنوان پارامتر ارسال می شوند.