• جاوا اسکریپت: چگونه یک عنصر جدید به یک شی اضافه کنیم؟ جاوا اسکریپت: ایجاد قطعات DOM جاوا اسکریپت افزودن یک عنصر

    آخرین به روز رسانی: 1.11.2015

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

      createElement(elementName): یک عنصر html ایجاد می کند که تگ آن به عنوان پارامتر ارسال می شود. عنصر ایجاد شده را برمی گرداند

      createTextNode(text): یک گره متنی ایجاد و برمی گرداند. متن گره به عنوان یک پارامتر ارسال می شود.

    varelem = document.createElement("div"); var elemText = document.createTextNode("سلام جهان");

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

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

      appendChild(newNode): یک گره جدید newNode را به انتهای مجموعه گره های فرزند اضافه می کند.

      insertBefore(newNode، referenceNode): یک گره جدید newNode را قبل از referenceNode درج می کند.

    ما از روش appendChild استفاده می کنیم:

    عنوان مقاله

    پراگراف اول

    پاراگراف دوم

    var articleDiv = document.querySelector("div.article"); // ایجاد عنصر var elem = سند.createElement("h2"); // برای آن متن ایجاد کنید var elemText = سند createTextNode("Hello world"); // اضافه کردن متن به عنصر به عنوان فرزند elem.appendChild(elemText); // افزودن عنصر به div articleDiv.appendChild(elem);

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

    با این حال، ما نیازی به ایجاد یک گره متن اضافی برای تعریف متن در داخل عنصر نداریم، زیرا می‌توانیم از ویژگی textContent استفاده کرده و متن را مستقیماً به آن اختصاص دهیم:

    Varelem = document.createElement("h2"); elem.textContent = "سلام دنیا";

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

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

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

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

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

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

    Var articleDiv = document.querySelector("div.article"); // شبیه سازی عنصر articleDiv var newArticleDiv = articleDiv.cloneNode(true); // اضافه کردن به انتهای عنصر بدن document.body.appendChild(newArticleDiv);

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

    حذف یک عنصر

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

    Var articleDiv = document.querySelector("div.article"); // پیدا کردن گره ای که باید حذف شود - پاراگراف اول var removableNode = document.querySelectorAll("div.article p"); // حذف گره articleDiv.removeChild(removableNode);

    در این حالت، اولین پاراگراف از بلوک div حذف می شود.

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

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

    Var articleDiv = document.querySelector("div.article"); // پیدا کردن گره جایگزین - پاراگراف اول var oldNode = document.querySelectorAll("div.article p"); // ایجاد عنصر var newNode = سند.createElement("h2"); // برای آن متن ایجاد کنید var elemText = سند createTextNode("Hello world"); // اضافه کردن متن به عنصر به عنوان فرزند newNode.appendChild(elemText); // جایگزین گره قدیمی با گره جدید articleDiv.replaceChild(newNode, oldNode);

    در این صورت، بند اول را با عنوان h2 جایگزین کنید.

    در این درس، نحوه ایجاد گره های عنصر (createElement) و گره های متن (createTextNode) را یاد می گیریم. و همچنین روش‌هایی را برای اضافه کردن گره‌ها به درخت (appendChild، insertBefore) و برای حذف گره‌ها از درخت (removeChild) در نظر بگیرید.

    اضافه کردن گره ها به درخت

    افزودن یک گره جدید به درخت معمولاً در 2 مرحله انجام می شود:

  • گره مورد نیاز را با استفاده از یکی از روش های زیر ایجاد کنید:
    • createElement() - یک عنصر (گره) با نام مشخص شده (تگ) ایجاد می کند. متد createElement(element) دارای یک پارامتر (عنصر) مورد نیاز است که یک رشته حاوی نام عنصر (برچسب) است که باید ایجاد شود. نام عنصر (تگ) در پارامتر باید با حروف بزرگ مشخص شود. در نتیجه این متد عنصر ایجاد شده را برمی گرداند.
    • createTextNode() - یک گره متنی با متن مشخص شده ایجاد می کند. متد createTextNode(text) دارای یک پارامتر مورد نیاز (متن) است که یک رشته حاوی متن گره متن است. در نتیجه، این روش گره متنی را که ایجاد شده است برمی گرداند.
  • مکانی را در درختی که می خواهید گره را در آن وارد کنید مشخص کنید. برای این کار از یکی از روش های زیر استفاده کنید:
    • appendChild() - یک گره را به عنوان آخرین گره فرزند عنصری که این متد بر روی آن فراخوانی شده است اضافه می کند. متد appendChild(node) یک پارامتر مورد نیاز دارد، گرهی که می خواهید اضافه کنید. در نتیجه، این روش گره اضافه شده را برمی گرداند.
    • insertBefore() - یک گره را به عنوان گره فرزند عنصری که این متد بر روی آن فراخوانی شده است درج می کند. متد insertBefore(newNode,existingNode) دو پارامتر دارد: newNode (الزامی) - گره ای که می خواهید اضافه کنید، موجود Node (اختیاری) - گره فرزند عنصری که می خواهید گره را قبل از آن درج کنید. اگر پارامتر دوم (ExistingNode) مشخص نشده باشد، این روش آن را در انتها درج می کند، یعنی. به عنوان آخرین گره فرزند عنصری که این متد بر روی آن فراخوانی می شود. متد insertBefore() گره درج شده را در نتیجه برمی گرداند.

    مثلا:

    • کامپیوتر
    • لپ تاپ
    • تبلت

    بیایید به یک مثال پیچیده تر نگاه کنیم که در آن یک گره LI به درخت حاوی یک گره متنی با متن "Smartphone" در انتهای لیست ul اضافه می کنیم.

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

  • ایجاد عنصر (گره) LI .
  • یک گره متنی حاوی متن "Smartphone" ایجاد کنید.
  • گره متنی جدید ایجاد شده را به عنوان آخرین گره فرزند عنصر LI تازه ایجاد شده اضافه کنید
  • گره LI تازه ایجاد شده را به عنوان آخرین گره فرزند عنصر ul اضافه کنید
  • //ایجاد عنصر (گره) li var elementLI = document.createElement("li"); //ایجاد یک گره متنی حاوی متن "Smartphone" var textSmart= document.createTextNode("Smartphone"); //افزودن گره متن ایجاد شده به عنوان آخرین فرزند عنصر LI تازه ایجاد شده elementLI.appendChild(textSmart); //دریافت عنصری که گره li ایجاد شده به عنوان فرزند به آن اضافه می شود var elementUL = document.getElementById("list"); //المان li ایجاد شده را به عنوان آخرین عنصر فرزند به UL با id="list" elementUL.appendChild(elementLI);

    متدهای appendChild() و insertBefore() هنگام کار با گره های موجود

    کار با گره های موجود با استفاده از متدهای appendChild() و insertBefore() نیز در 2 مرحله انجام می شود:

  • یک گره موجود در درخت را دریافت کنید.
  • محل درج گره را با استفاده از متد ()appendChild یا insertBefore() مشخص کنید. با این کار گره از محل قبلی خود حذف می شود.
  • به عنوان مثال، یک عنصر li موجود حاوی متن "Tablet" را به بالای لیست اضافه کنید (با این کار آن را از موقعیت قبلی خود حذف می کنید):

    //دریافت عنصر UL حاوی لیست با شناسه آن var elementUL = document.getElementById("list"); // دریافت عنصر li حاوی گره متنی "قرص" var elementLI = elementUL.childNodes; //عنصر را به ابتدای لیست اضافه کنید //با این کار آن را از محل اصلی خود حذف می کنید elementUL.insertBefore(elementLI,elementUL.firstChild);

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

    حذف یک گره از درخت در 2 مرحله انجام می شود:

  • این گره را در درخت دریافت کنید (پیدا کنید). این عمل معمولاً توسط یکی از روش‌های زیر انجام می‌شود: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() یا querySelectorAll() .
  • متد removeChild() را در گره والد فراخوانی کنید و گره ای را که می خواهیم از آن حذف کنیم به عنوان پارامتر ارسال کنید.
    متد removeChild() گره حذف شده را به عنوان مقدار خود برمی گرداند یا اگر گره ای که می خواستیم حذف کنیم وجود نداشت null را برمی گرداند.
  • //گره ای را که می خواهیم حذف کنیم پیدا کنید var findElement = document.getElementById("notebook"); //متد removeChild را در گره والد فراخوانی کنید //و آن را به گره یافت شده به عنوان پارامتر منتقل کنید findElement.parentNode.removeChild(findElement);

    به عنوان مثال، آخرین فرزند یک عنصر با id="myID" را حذف کنید:

    //get element with id="myID" var myID = document.getElementById("myID"); //آخرین گره فرزند عنصر myID var lastNode = myID.lastChild; //زیرا ما نمی دانیم که آخرین گره فرزند عنصر یک عنصر است یا نه، //از حلقه while برای پیدا کردن آخرین فرزند عنصر myID استفاده کنید //تا زمانی که عنصر دارای گره باشد و نوع آن برابر با 1 نباشد (یعنی. این یک عنصر نیست) اجرا شود (lastNode && lastNode.nodeType!=1) (//رفتن به گره قبلی lastNode = lastNode.previousSibling; ) //اگر عنصری را در گره myID if (lastNode) پیدا کردیم (// سپس باید lastNode.parentNode.removeChild( lastNode) حذف شود.

    به عنوان مثال، تمام گره های فرزند را از یک عنصر با id="myQuestion" حذف کنید:

    //دریافت عنصری که می‌خواهیم تمام گره‌های فرزند آن را حذف کنیم var elementQuestion = document.getElementById("myQuestion"); //در حالی که اولین عنصر وجود دارد while (elementQuestion.firstElement) ( //remove it elementQuestion.removeChild(element.firstChild)؛ )

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

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

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

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

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

    Varel = document.createElement("div"); var elText = document.createTextNode("Hello World");

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

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

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

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

    عنوان مقاله

    پراگراف اول

    پاراگراف دوم

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

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

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

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

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

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

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

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

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

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

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

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

    حذف یک عنصر

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

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

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

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

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

    VarartDiv = document.querySelector("div.article"); // پیدا کردن گره جایگزین - اولین پاراگراف var old = document.querySelectorAll("div.article p"); // ایجاد عنصر var new = سند.createElement("h3"); // برای آن متن ایجاد کنید var elemtxt = سند 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) بنویسید که یکی پس از دیگری در خود تابع وارد می شود، خود عناصر به عنوان پارامتر ارسال می شوند.



    حذف عنصر 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.prototype.appendBefore = تابع (عنصر) ( element.parentNode.insertBefore(this, element); ),false;

    .appendAfter (عنصر) نمونه اولیه

    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 جدید برمی گرداند

    پسوند گره

    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(link, lastnode.nextSibling )); //قبل از درج بررسی کنید 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 است، بنابراین از این طریق به parentNode والد دسترسی دارد. تابع ما وجود ندارد، بنابراین باید عنصر والد را به عنوان پارامتر ارسال کنیم.

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

    تابع 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 p = document.createElement("p");
    p.appendChild(document.createTextNode("یک ماهی واقعی."));
    div 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 td;
    holder.appendChild(
    جدول =
    create("جدول", (id: "زشت"، cols:3)
    ایجاد ("بدن"، ()
    ایجاد ("tr"، ()
    create("td", ( عرض: "10%" )
    سلام)،
    td =
    create("td", (سبک: "پس زمینه: #fcc")،
    "آنجا")،
    create("td"، (کلاس: "special2")، "Everywhere")
    )
    );

    نکته: 1. IE به عنصر tbody نیاز دارد، در غیر این صورت از نمایش جدول خودداری می کند.
    2. صفت 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++) {
    varval = آرگومان ها[i];
    if (نوع val == "رشته") ( val = document.createTextNode(val) );
    el.appendChild(val);
    }
    بازگشت el;
    }


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