একটি লাইব্রেরি ব্যবহার না করে জাভাস্ক্রিপ্টে অন্য একটি এলিমেন্টের পরে কীভাবে একটি উপাদান sertোকানো যায়?

Question

আছে insertBefore()জাভাস্ক্রিপ্ট মধ্যে, কিন্তু কিভাবে আমি একটি উপাদান ঢোকাতে পারবেন পর jQuery এর বা অন্য গ্রন্থাগার ব্যবহার না করেই অন্য উপাদান?

Comments

- আপনি খুব শেষ সন্তান নোডের নির্দিষ্ট ঘটনাতে প্রয়োজন হলে stackoverflow.com/questions/5173545/...

বিকাশকারী.মোজিলা.আর.ইন-

— অ্যালান ল্যারিমার

@ অ্যালানলারিমার এটি দুর্দান্ত। ধন্যবাদ। আপনি কি জানেন কখন ইনসার্টএডজ্যাসেন্টএলিমেন্টটি চালু হয়?

— Xah লি

এমডিএন অনুসারে এটি আইই 8 এবং ফায়ারফক্স 48 (2016 আগস্ট 08) এ সমর্থিত। ট্রেইলটি অনুসরণ করুন: bugzilla.mozilla.org/show_bug.cgi?id=811259 -> w3.org/Bugs/Public/show_bug.cgi?id=19962 (2016 মার্চ 14)

— অ্যালান ল্যারিমার

Answer 1

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

referenceNodeআপনি যে নোডটি newNodeপরে রাখতে চান তা কোথায় । তাহলে referenceNodeতার পিতা বা মাতা উপাদান মধ্যে শেষ সন্তান, যে সূক্ষ্ম, কারণ referenceNode.nextSiblingহতে হবে nullএবং insertBeforeতালিকার শেষে যোগ করে ক্ষেত্রে যে হ্যান্ডলগুলি।

তাই:

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

---

আপনি নিম্নলিখিত স্নিপেট ব্যবহার করে এটি পরীক্ষা করতে পারেন:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

Comments

দুর্দান্ত উত্তরের জন্য ধন্যবাদ, তবে এটি আর্গুমেন্টের তালিকায় রেফারেন্স নোড এবং নিউ নোড ফ্লিপ করা বিভ্রান্তিকর নয়? সন্নিবেশপূর্ব সিনট্যাক্স মেনে চলছেন না কেন?

— গিজসানবি

এই কোড স্নিপেট হ্যান্ডেল করে না যদি রেফারেন্সনোডটি সর্বশেষ সন্তানের হয়, যাতে এটি অ্যাপেন্ডচিল্ড হওয়া উচিত।

— ব্র্যাড ভোগেল

এমডিএন অনুসারে যদি উপাদানটি শেষ থাকে (এবং সুতরাং পরবর্তী শিলিং নাল হয়) নতুন নোডটি প্রত্যাশা অনুযায়ী সংযোজন করা হবে

— ইলেক্ট্রোকুটি

— संदर्भনোড.নেক্সটএলমেন্টসিলিং

@ ভূমিসিংহাল: ভুল। insertBefore()পাঠ্য নোডের সাথে কাজ করে। আপনি insertAfter()আলাদা হতে চান কেন ? আপনার নামের জন্য আলাদা আলাদা ফাংশন তৈরি করতে হবে insertBeforeElement()এবং তার insertAfterElement()জন্য।

— 7vujy0f0hy

Answer 2

সোজা জাভাস্ক্রিপ্ট নিম্নলিখিত হতে হবে:

পূর্বে যোগ করুন:

element.parentNode.insertBefore(newElement, element);

পরে যোগ করুন:

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

---

তবে, ব্যবহারের সহজতার জন্য সেখানে কিছু প্রোটোটাইপ টস করুন

নিম্নলিখিত প্রোটোটাইপগুলি তৈরি করে আপনি নতুন তৈরি উপাদানগুলির মাধ্যমে সরাসরি এই ফাংশনটি কল করতে সক্ষম হবেন।

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBe पूर्व (উপাদান) প্রোটোটাইপ

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter (উপাদান) প্রোটোটাইপ

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

---

এবং, এটি সমস্ত কার্য সম্পাদন করতে, নিম্নলিখিত কোড স্নিপেট চালান

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;


/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';


/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));

div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}

<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

এটি জেএসফিডেলে চালান

Comments

এক্সটেনশন ফাংশন নাম বিভ্রান্ত করছেন। এটির পরিবর্তে এটি appendMeBefore এবং appendMeAfter বলা উচিত বলে মনে করে। আমি ভেবেছিলাম এটি অ্যাপেন্ডচিল্ড () পদ্ধতির মতো ব্যবহৃত হয়েছিল , যেমন existingElement.appendAfter(newElement);। এই আপডেট করা jsfiddle এ আমি কী বলতে চাই তা দেখুন ।

— stomtech

কাজের পরে সংযুক্ত করুন, কারণ যদি এলিমেন্ট.নেক্সটসিলিংয়ের পরবর্তী ভাইবোন না থাকে, নেক্সটসিলিংটি ন্যূনল, এবং তারপরে এটি শেষে যুক্ত হবে।

— স্টিফান স্টেইগার

Answer 3

insertAdjacentHTML + + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

upsides:

• DRYer: আপনার আগে কোনও নোড ভেরিয়েবলে সংরক্ষণ করতে হবে এবং এটি দুটিবার ব্যবহার করতে হবে না। আপনি যদি পরিবর্তনশীলটির নাম পরিবর্তন করেন, সংশোধন করার জন্য কম উপস্থিতিতে।
• গল্ফগুলি এর চেয়ে আরও ভাল insertBefore(বিদ্যমান নোড ভেরিয়েবলের নামটি তিনটি বর্ণ দীর্ঘ হলেও ভেঙে দেয়)

downsides:

• আরও কম ব্রাউজার সমর্থন: https://caniuse.com/#feat=insert-adjacent
• ইভেন্টের মতো উপাদানগুলির বৈশিষ্ট্য হারাবে কারণ outerHTMLউপাদানটিকে স্ট্রিংয়ে রূপান্তর করে। আমাদের এটি দরকার কারণ insertAdjacentHTMLউপাদানগুলির চেয়ে স্ট্রিং থেকে সামগ্রী যুক্ত করা হয়।

Comments

আপনার যদি ইতিমধ্যে উপাদান তৈরি করা থাকে তবে আপনি ব্যবহার করতে পারেন.insertAdjacentElement()

— গেটফ্রি

2018 এর হিসাবে, ব্রাউজার সমর্থনটি বেশ শক্ত দেখাচ্ছে: caniuse.com/#feat=insert-adjacent

— madannes

এটি একটি দুর্দান্ত সমাধান ছিল, আমি প্রস্তাব দিচ্ছি যে এই xahlee.info/js/js_insert_:40.html

— রহমানি

Answer 4

একটি দ্রুত গুগল অনুসন্ধান এই স্ক্রিপ্টটি প্রকাশ করে

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

Comments

যে কেউ এই স্ক্রিপ্টে হোঁচট খায়, আমি এটি ব্যবহার করার পরামর্শ দিচ্ছি না। @ করিম's৯ এর দেশীয় সমাধান ইতিমধ্যে সমাধান করা সমস্যাগুলি সমাধান করার চেষ্টা করে। তাঁর স্ক্রিপ্টটি দ্রুত এবং আরও দক্ষ - আমি দৃ one়ভাবে এই স্ক্রিপ্টটির পরিবর্তে সেই স্ক্রিপ্টটি ব্যবহার করার পরামর্শ দেব।

— জেমস লং

জাভাস্ক্রিপ্ট-এ-সাধারণ-নিয়ম-এর-থাম্ব হিসাবে, ব্রাউজারটি আপনার যে কোনও কিছু লিখতে পারে তার চেয়ে দ্রুত কোনও কাজ করতে পারে। যদিও দুটি সমাধান ক্রিয়াগতভাবে একই, তবে আমার জাভাস্ক্রিপ্ট সমাধানটি ব্রাউজারটি ব্যবহার করার আগে এটি বোঝার আগে পড়তে হবে এবং প্রতিবার এটি কার্যকর করার সময় একটি অতিরিক্ত চেক প্রয়োজন। করিম by৯ দ্বারা প্রদত্ত সমাধানটি অভ্যন্তরীণভাবে এই পদক্ষেপগুলি সংরক্ষণ করবে। পার্থক্যটি সবচেয়ে নগণ্য হবে তবে তার সমাধানটি আরও ভাল।

— জেমস লং

অন্য কথায়, এটি এমন একটি সমস্যা সমাধানের চেষ্টা করছে যা বিদ্যমান নেই। অতিরিক্ত চেক সম্পর্কে সহজাত কোনও ভুল নেই, তবে আমি মনে করি এটি এই পদ্ধতির সর্বোত্তম বোঝার প্রচার করছে না

— 1j01

যথেষ্ট. আমি এখানে স্ক্রিপ্টটি রেখে চলেছি কারণ এটি আমি লেখার মতো ধরণের জিনিস ছিলাম তবে গ্রহণযোগ্য উত্তরটি আরও ভাল, পদ্ধতিগুলির আরও ভাল বোঝার জন্য দেখায় এবং দ্রুত। পরিবর্তে এই উত্তরটি ব্যবহার করার কোনও কারণ নেই - এটি এখনও কেন উচ্চতর হয় তা আমি নিশ্চিত নই

— জেমস লং

যদি লক্ষ্য-এলিমেন্টটি তার ভাইবোনদের মধ্যে শেষ উপাদান হয় তবে targetElement.nextSiblingতা ফিরে আসবে null। এটি দ্বিতীয় আর্গুমেন্ট হিসাবে যখন node.insertBeforeডাকা হয় null, তখন এটি সংগ্রহের শেষে নোড যুক্ত করবে। অন্য কথায় if(parent.lastchild == targetElement) {শাখাটি অতিমাত্রায় প্রোথিত, কারণ parent.insertBefore(newElement, targetElement.nextSibling);এটি প্রথমে অন্যথায় প্রদর্শিত হলেও, সমস্ত ক্ষেত্রে সঠিকভাবে মোকাবেলা করবে। অনেকে ইতিমধ্যে অন্যান্য মন্তব্যে এটি নির্দেশ করেছেন।

— রোল্ফ

Answer 5

যদিও insertBefore()( MDN দেখুন ) দুর্দান্ত এবং এখানে বেশিরভাগ উত্তর দ্বারা রেফারেন্স করা হয়। যুক্ত নমনীয়তার জন্য, এবং আরও কিছুটা স্পষ্ট করার জন্য, আপনি ব্যবহার করতে পারেন:

insertAdjacentElement()( এমডিএন দেখুন ) এটি আপনাকে যে কোনও উপাদানকে রেফারেন্স করতে দেয় এবং আপনি যেখানে চান ঠিক তেমন সরানো উপাদানটি সন্নিবেশ করতে দেয়:

<!-- refElem.insertAdjacentElement('beforebegin', moveMeElem); -->
<p id="refElem">
    <!-- refElem.insertAdjacentElement('afterbegin', moveMeElem); -->
    ... content ...
    <!-- refElem.insertAdjacentElement('beforeend', moveMeElem); -->
</p>
<!-- refElem.insertAdjacentElement('afterend', moveMeElem); -->

অন্যদের অনুরূপ ব্যবহারের ক্ষেত্রে বিবেচনা করা উচিত: insertAdjacentHTML()এবংinsertAdjacentText()

তথ্যসূত্র:

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentH HTML https: // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

Comments

সত্যই এই উত্তরটি কিছুটা ভালবাসা দেওয়া উচিত, এটি ২০২০ এর দশকের জন্য আধুনিক পদ্ধতির যা দ্রুত এগিয়ে আসছে।

— সেরোসেস

এই উত্তর এত গভীরভাবে কবর দেওয়া হয় কিভাবে? আমি আরও মনোযোগ আনতে কিছু পয়েন্ট এটি পুরষ্কার দেব।

— কিওয়ার্টি

Answer 6

পদ্ধতি node.after( ডক ) অন্য নোডের পরে নোড সন্নিবেশ করায়।

দুটি ডোম নোডের জন্য node1এবং node2,

node1.after(node2)সন্নিবেশ node2পরে node1।

পুরানো ব্রাউজারগুলিতে এই পদ্ধতিটি উপলভ্য নয়, তাই সাধারণত পলিফিলের প্রয়োজন হয়।

Comments

এটি কার্যকরভাবে insertAfter হিসাবে প্রয়োগের পরে কিছুটা ম্যানুয়াল কাজ গ্রহণ করে, সুতরাং দুর্ভাগ্যক্রমে আমি ভাবি না যে এটি সঠিকভাবে কাজ করবে।

— মিস্টার স্যারকোড

Answer 7

2018 সমাধান (খারাপ অনুশীলন, 2020 এ যান)

আমি জানি এই প্রশ্নটি প্রাচীন, তবে যে কোনও ভবিষ্যতের ব্যবহারকারীদের জন্য, এটি পরিবর্তিত প্রোটোটাইপ হ'ল ইনসেটএফটার ফাংশনের জন্য কেবলমাত্র একটি মাইক্রো পলফিল যা এই প্রোটোটাইপটি অ্যালিমেন্ট প্রোটোটাইপে সরাসরি একটি নতুন ফাংশন যুক্ত baseElement.insertAfter(element);করে:

Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

একবার আপনি পলিফিলটি একটি লাইব্রেরিতে রেখে গেস্ট, বা কেবল আপনার কোডে (বা অন্য কোথাও যেখানে এটি উল্লেখ করা যেতে পারে) কেবল লিখুন document.getElementById('foo').insertAfter(document.createElement('bar'));

---

2019 সমাধান (কুশলী, 2020 এ যান)

নতুন সম্পাদনা: আপনি ব্যক্তিগত বৈশিষ্ট্য ব্যবহার করবেন না। তারা ডিফল্ট কোডবেস ওভাররাইট করে এবং খুব দক্ষ বা নিরাপদ না করে এবং সামঞ্জস্যতা ত্রুটি ঘটাতে পারে তবে এটি যদি অ-বাণিজ্যিক প্রকল্পের জন্য হয় তবে তা বিবেচ্য নয়। আপনি যদি বাণিজ্যিক ব্যবহারের জন্য কোনও নিরাপদ ফাংশন চান তবে কেবল একটি ডিফল্ট ফাংশন ব্যবহার করুন। এটি সুন্দর নয় তবে এটি কাজ করে:

function insertAfter(el, newEl) {
    el.parentNode.insertBefore(newEl, this.nextSibling);
}

// use

const el = document.body || document.querySelector("body");
// the || means "this OR that"

el.insertBefore(document.createElement("div"), el.nextSibling);
// Insert Before

insertAfter(el, document.createElement("div"));
// Insert After 

---

2020 সমাধান

চাইল্ডনোডের জন্য বর্তমান ওয়েব স্ট্যান্ডার্ড: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode

এটি বর্তমানে লিভিং স্ট্যান্ডার্ডগুলিতে এবং নিরাপদ।

অসমর্থিত ব্রাউজারগুলির জন্য, এই পলিফিলটি ব্যবহার করুন: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js

কেউ উল্লেখ করেছিলেন যে পলিফিল প্রোটোস ব্যবহার করে, যখন আমি বলেছিলাম তারা খারাপ অভ্যাস ছিল। এগুলি হ'ল , বিশেষত যখন এগুলিকে ভুলভাবে ব্যবহার করা হয়, যেমন আমার 2018 এর সমাধান হিসাবে । এটি যে দিন এবং যুগে প্রোটোটাইপ ওভাররাইটিং তেমন খারাপ ছিল না, পুরানো ব্রাউজার সমর্থনের জন্য এটি।

2020 সমাধানটি কীভাবে ব্যবহার করবেন:

const el = document.querySelector(".class");

// Create New Element
const newEl = document.createElement("div");
newEl.id = "foo";

// Insert New Element BEFORE
el.before(newEl);

// Insert New Element AFTER
el.after(newEl);

// Remove Element
el.remove();

// Remove Child
newEl.remove(); // This one wasnt tested but should work

Answer 8

বা আপনি সহজভাবে করতে পারেন:

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )

Comments

আমি এই পদ্ধতির কথা ভাবিনি। আমি @ করিম's৯ এর আরও সরাসরি উত্তরটি ব্যবহার করতে পছন্দ করব তবে মনে রাখা ভাল।

— বেন জে

Answer 9

পদক্ষেপ 1. উপাদান প্রস্তুত:

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

পদক্ষেপ 2. পরে যুক্ত করুন:

elementParent.insertBefore(newElement, element.nextSibling);

Answer 10

insertBefore () পদ্ধতিটি এর মতো ব্যবহৃত হয় parentNode.insertBefore()। সুতরাং এটি অনুকরণ এবং একটি পদ্ধতি তৈরি করতে parentNode.insertAfter()আমরা নিম্নলিখিত কোডটি লিখতে পারি।

জাভাস্ক্রিপ্ট

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

এইচটিএমএল

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

দ্রষ্টব্য, এই নিবন্ধে বর্ণিত হিসাবে DOM বাড়ানো আপনার পক্ষে সঠিক সমাধান হতে পারে না ।

হ্যাওওয়ার, এই নিবন্ধটি 2010 সালে লেখা হয়েছিল এবং এখন জিনিসগুলি আলাদা হতে পারে। সুতরাং আপনার নিজের সিদ্ধান্ত নিন।

জাভাস্ক্রিপ্ট DOM insertAfter () পদ্ধতি @ jsfiddle.net

Answer 11

আদর্শভাবে সন্নিবেশপূর্বেরinsertAfter মতো কাজ করা উচিত । নীচের কোডটি নিম্নলিখিতটি সম্পাদন করবে:

• যদি কোনও শিশু না থাকে Nodeতবে নতুনটি সংযুক্ত করা হয়
• যদি কোন রেফারেন্স Node, নতুন Nodeযোগ করা হয়
• যদি কোন Nodeরেফারেন্স পর Node, নতুন 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);

কোডটি চলমান দেখুন

// First extend
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 = 'First new item';
newNode.style.color = '#FF0000';

document.getElementById('no-children').insertAfter(newNode);

newNode = document.createElement('li');
newNode.innerText = 'Second new item';
newNode.style.color = '#FF0000';

document.getElementById('no-reference-node').insertAfter(newNode);

referenceNode = document.getElementById('no-sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Third new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

referenceNode = document.getElementById('sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Fourth new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

<h5>No children</h5>
<ul id="no-children"></ul>

<h5>No reference node</h5>
<ul id="no-reference-node">
  <li>First item</li>
</ul>

<h5>No sibling after</h5>
<ul>
  <li id="no-sibling-after">First item</li>
</ul>

<h5>Sibling after</h5>
<ul>
  <li id="sibling-after">First item</li>
  <li>Third item</li>
</ul>

Answer 12

আমি জানি এই প্রশ্নটির ইতিমধ্যে অনেকগুলি উত্তর রয়েছে, কিন্তু তাদের মধ্যে কেউই আমার সঠিক প্রয়োজনীয়তা পূরণ করেনি।

আমি এমন একটি ফাংশন চেয়েছিলাম যার সঠিক বিপরীত আচরণ থাকতে পারেparentNode.insertBefore - এটি অবশ্যই একটি নাল গ্রহণ করতে হবে referenceNode(যা গ্রহণযোগ্য উত্তর দেয় না) এবং বাচ্চাদের শেষে কোথায় insertBeforeপ্রবেশ করাতে হবে এটি শুরুতে প্রবেশ করাতে হবে , অন্যথায় সেখানে থেকে ' d এই ফাংশনটি দিয়ে কোনও আরম্ভের জায়গাতে toোকানোর উপায় নয়; শেষে একই কারণ সন্নিবেশ করানো হয়।insertBefore

যেহেতু নালীর referenceNodeজন্য আপনাকে পিতামাতার সন্ধান করতে হবে , তাই আমাদের পিতামাতাকে জানা দরকার - insertBeforeএটি একটি পদ্ধতি parentNode, সুতরাং এটি পিতামাতার কাছে সেভাবে অ্যাক্সেস পায়; আমাদের ফাংশনটি করে না, তাই আমাদের প্যারামিটার হিসাবে পিতামাতার পাস করতে হবে।

ফলস্বরূপ ফাংশনটি দেখতে এরকম দেখাচ্ছে:

function insertAfter(parentNode, newNode, referenceNode) {
  parentNode.insertBefore(
    newNode,
    referenceNode ? referenceNode.nextSibling : parentNode.firstChild
  );
}

অথবা (যদি আপনার অবশ্যই হয় তবে আমি এটি প্রস্তাব দিই না) আপনি অবশ্যই Nodeপ্রোটোটাইপ বাড়িয়ে তুলতে পারেন :

if (! Node.prototype.insertAfter) {
  Node.prototype.insertAfter = function(newNode, referenceNode) {
    this.insertBefore(
      newNode,
      referenceNode ? referenceNode.nextSibling : this.firstChild
    );
  };
}

Answer 13

এই কোডটি সর্বশেষ বিদ্যমান সন্তানের একটি ছোট সিএসএস ফাইল ইনলাইন করার জন্য ঠিক একটি লিঙ্ক আইটেম sertোকানোর কাজ করছে is

var raf, cb=function(){
    //create newnode
    var link=document.createElement('link');
    link.rel='stylesheet';link.type='text/css';link.href='css/style.css';

    //insert after the lastnode
    var nodes=document.getElementsByTagName('link'); //existing nodes
    var lastnode=document.getElementsByTagName('link')[nodes.length-1]; 
    lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};

//check before insert
try {
    raf=requestAnimationFrame||
        mozRequestAnimationFrame||
        webkitRequestAnimationFrame||
        msRequestAnimationFrame;
}
catch(err){
    raf=false;
}

if (raf)raf(cb); else window.addEventListener('load',cb);

Answer 14

আপনি appendChildএকটি উপাদান পরে সন্নিবেশ ফাংশন ব্যবহার করতে পারেন ।

তথ্যসূত্র: http://www.w3schools.com/jsref/met_node_appendchild.asp

Comments

এই সমাধানটি 2 টি ট্যাগের জন্য কাজ করে না .. আপনি এই ফাংশনটির সাথে অন্য পি ট্যাগের পরে এপি ট্যাগ যুক্ত করতে পারবেন না

— মেহেরেগান রহমানি

Answer 15

InsertAfter এর একটি দৃ implementation় বাস্তবায়ন।

// source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js
Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) {
  function isNode(node) {
    return node instanceof Node;
  }

  if(arguments.length < 2){
    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present."));
  }

  if(isNode(newNode)){
    if(referenceNode === null || referenceNode === undefined){
      return this.insertBefore(newNode, referenceNode);
    }

    if(isNode(referenceNode)){
      return this.insertBefore(newNode, referenceNode.nextSibling);
    }

    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'."));
  }

  throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));

};

Comments

এই উত্তরটি কীভাবে বর্তমান সমস্যা সমাধানে

— ওপিকে

উপরের কোডটি চালান, তারপরে আপনি নির্দিষ্ট রেফারেন্সনোডের পরে একটি নতুন নোড canোকাতে পারেন।

— জাজহউ

Answer 16

সমস্ত পরিস্থিতিতে পরিচালনা করতে দেয়

 function insertAfter(newNode, referenceNode) {
        if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == '#text')
            referenceNode = referenceNode.nextSibling;

        if(!referenceNode)
            document.body.appendChild(newNode);
        else if(!referenceNode.nextSibling)
            document.body.appendChild(newNode);
        else            
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);            
    }

Answer 17

if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}

Answer 18

আপনি প্রকৃতপক্ষে after()ক্রোম, ফায়ারফক্স এবং অপেরার নতুন সংস্করণে ডাকা একটি পদ্ধতি করতে পারেন । এই পদ্ধতির খারাপ দিকটি হ'ল ইন্টারনেট এক্সপ্লোরার এটি এখনও সমর্থন করে না।

উদাহরণ:

// You could create a simple node
var node = document.createElement('p')

// And then get the node where you want to append the created node after
var existingNode = document.getElementById('id_of_the_element')

// Finally you can append the created node to the exisitingNode
existingNode.after(node)

এটি পরীক্ষা করার জন্য একটি সাধারণ এইচটিএমএল কোড:

<!DOCTYPE html>
<html>
<body>
     <p id='up'>Up</p>
    <p id="down">Down</p>
  <button id="switchBtn" onclick="switch_place()">Switch place</button>
  <script>
    function switch_place(){
      var downElement = document.getElementById("down")
      var upElement = document.getElementById("up")
      downElement.after(upElement);
      document.getElementById('switchBtn').innerHTML = "Switched!"
    }
  </script>
</body>
</html>

যেমনটি প্রত্যাশিত, এটি ডাউন এলিমেন্টের পরে আপ এলিমেন্টটি সরায়