एक पुस्तकालय का उपयोग किए बिना जावास्क्रिप्ट में किसी अन्य तत्व के बाद एक तत्व कैसे डालें?

Question

नहीं है insertBefore()जावास्क्रिप्ट में है, लेकिन मैं कैसे एक तत्व सम्मिलित कर सकते हैं के बाद jQuery या एक और पुस्तकालय का उपयोग किए बिना एक और तत्व?

Comments

अगर आपको बहुत आखिरी बच्चे के विशिष्ट मामले की जरूरत है - stackoverflow.com/questions/5173545/…

developer.mozilla.org/en-US/docs/Web/API/Element/… या developer.mozilla.org/en-US/docs/Web/API/Element/…

— एलन लार्इमर

@AlanLarimer यह बहुत अच्छा है। धन्यवाद। क्या आप जानते हैं कि कब सम्मिलित किया गया है।

— Xah Lee

एमडीएन के अनुसार यह IE8 और फ़ायरफ़ॉक्स 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

एक महान जवाब के लिए धन्यवाद, लेकिन यह संदर्भ सूची में फ्लिप करने के लिए भ्रमित नहीं हैNode और NewNode? इन्सर्टबियर सिंटैक्स का अनुपालन क्यों नहीं किया जाता है?

— गिज्जनबी

यह कोड स्निपेट हैंडल नहीं करता है यदि रेफरेंसकोड अंतिम बच्चा है, जिसमें इसे संलग्न करना चाहिए।

— ब्रैड वोगेल

MDN के अनुसार यदि तत्व अंतिम है (और इसलिए अगली बार अशक्त है) newNode को अपेक्षित रूप से जोड़ा जाएगा

— electroCutie

referenceNode.nextElementSibling उपयोग करने के लिए एक बेहतर विकल्प है

— भूमि सिंघल

@ भूमिंघल: गलत। insertBefore()पाठ नोड्स के साथ काम करता है। आप insertAfter()अलग क्यों होना चाहते हैं ? आपको नाम के लिए insertBeforeElement()और उसके insertAfterElement()लिए अलग-अलग युग्म बनाने चाहिए ।

— 7vujy0f0hy

Answer 2

सीधा जावास्क्रिप्ट निम्नलिखित होगा:

इससे पहले आवेदन करें:

element.parentNode.insertBefore(newElement, element);

इसके बाद आवेदन करें:

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

---

लेकिन, उपयोग की आसानी के लिए कुछ प्रोटोटाइप टॉस

निम्नलिखित प्रोटोटाइप का निर्माण करके, आप नए बनाए गए तत्वों से सीधे इन फ़ंक्शन को कॉल कर पाएंगे।

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore (तत्व) प्रोटोटाइप

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>

इसे JSFiddle पर चलाएं

Comments

विस्तार फ़ंक्शन नाम को गुमराह कर रहे हैं। ऐसा लगता है कि इसे परिशिष्ट कहा जाना चाहिए और इसके बाद। मैंने सोचा कि यह की तरह इस्तेमाल किया गया था appendChild () विधि , जैसे existingElement.appendAfter(newElement);। देखें कि इस अपडेटेड jsfiddle पर मेरा क्या मतलब है ।

— stomtech

काम के बाद अपेंड करें, क्योंकि अगर element.nextSibling में अगला सिबलिंग नहीं है, तो nextSibling NULL है, और फिर यह अंत में अपेंड हो जाएगा।

— स्टीफन स्टीगर

Answer 3

insertAdjacentHTML + outerHTML

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

तेजी:

• DRYer: आपको पहले वाले नोड को वेरिएबल में स्टोर नहीं करना है और इसे दो बार उपयोग करना है। यदि आप परिवर्तन करने के लिए कम घटना पर चर का नाम बदलते हैं।
• गोल्फ की तुलना में बेहतर insertBefore(ब्रेक भले ही मौजूदा नोड चर नाम 3 वर्ण लंबा है)

downsides:

• नए के बाद से कम ब्राउज़र समर्थन: https://caniuse.com/#feat=insert-adjacent
• तत्व जैसे कि घटनाओं के गुणों को खो देगा क्योंकि outerHTMLतत्व को एक स्ट्रिंग में परिवर्तित करता है। हमें इसकी आवश्यकता है क्योंकि insertAdjacentHTMLतत्वों के बजाय तार से सामग्री जोड़ता है।

Comments

यदि आपके पास पहले से ही निर्मित तत्व है, तो आप उपयोग कर सकते हैं.insertAdjacentElement()

— GetFree

2018 तक, ब्राउज़र का समर्थन बहुत ठोस दिखता है: caniuse.com/#feat=insert-adjacent

— madannes

यह एक अच्छा समाधान था, मेरा सुझाव है कि eveyone ने इस xahlee.info/js/js_insert_after.html

— Mehregan Rahmani

Answer 4

एक त्वरित Google खोज से इस स्क्रिप्ट का पता चलता है

// 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

जो कोई भी इस स्क्रिप्ट पर ठोकर खाता है, मैं उसे इस्तेमाल करने की सलाह नहीं देता। यह उन समस्याओं को हल करने का प्रयास करता है जो @ karim79 का मूल समाधान पहले से ही हल करता है। उनकी स्क्रिप्ट तेज़ और अधिक कुशल है - मैं इसके बजाय उस स्क्रिप्ट का उपयोग करने की दृढ़ता से सलाह दूंगा।

— जेम्स लॉन्ग

जावास्क्रिप्ट में एक सामान्य-नियम-के-अंगूठे के रूप में, ब्राउज़र आपके द्वारा लिखे जाने वाले कार्य की तुलना में तेज़ी से एक कार्य कर सकता है। यद्यपि दो समाधान कार्यात्मक रूप से समान हैं, मेरे जावास्क्रिप्ट समाधान को उपयोग करने से पहले ब्राउज़र द्वारा एक समझ को पढ़ने की आवश्यकता है और इसे निष्पादित होने पर प्रत्येक बार अतिरिक्त जांच की आवश्यकता होती है। Karim79 द्वारा प्रस्तुत समाधान उन सभी चरणों को सहेजते हुए आंतरिक रूप से करेगा। अंतर सबसे अच्छा होगा, लेकिन उसका समाधान बेहतर है।

— जेम्स लॉन्ग

दूसरे शब्दों में, यह एक ऐसी समस्या को हल करने का प्रयास कर रहा है जो मौजूद नहीं है। अतिरिक्त जांच के बारे में स्वाभाविक रूप से कुछ भी गलत नहीं है, लेकिन मुझे लगता है कि यह इन तरीकों की सबसे अच्छी समझ का प्रचार नहीं कर रहा है

— 1j01

बहुत ज्यादा। मैं यहां स्क्रिप्ट छोड़ रहा हूं क्योंकि यह उस तरह की चीज है जिसे मैं लिखता था, लेकिन स्वीकृत उत्तर बेहतर है, तरीकों की बेहतर समझ दिखाता है और तेज है। इस जवाब का उपयोग करने के बजाय कोई कारण नहीं है - मुझे यकीन नहीं है कि यह अभी भी क्यों उठता है

— जेम्स लॉन्ग

यदि लक्ष्य-निर्धारण भाई-बहनों के बीच अंतिम तत्व है, तो targetElement.nextSiblingवापस आ जाएगा null। जब इसे दूसरे तर्क के रूप node.insertBeforeमें कहा जाता nullहै, तो यह संग्रह के अंत में नोड को जोड़ देगा। दूसरे शब्दों में, if(parent.lastchild == targetElement) {शाखा बहुत ही शानदार है, क्योंकि parent.insertBefore(newElement, targetElement.nextSibling);यह सभी मामलों से ठीक से निपटेगा, भले ही यह पहली बार में दिखाई दे। कई लोग पहले ही अन्य टिप्पणियों में बता चुके हैं।

— रॉल्फ

Answer 5

यद्यपि insertBefore()( एमडीएन देखें ) महान है और यहां अधिकांश उत्तरों से संदर्भित है। अतिरिक्त लचीलेपन के लिए, और थोड़ा अधिक स्पष्ट होने के लिए, आप उपयोग कर सकते हैं:

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/insertAdjacentHTML https: // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

Comments

वास्तव में इस जवाब को कुछ प्यार देना चाहिए, यह 2020 के लिए आधुनिक दृष्टिकोण है जो जल्दी से आ रहे हैं।

— सेराओसे

कैसे आया यह जवाब इतना गहरा है? मैं इसे और अधिक ध्यान लाने के लिए कुछ बिंदुओं को पुरस्कृत करूंगा।

— क्वर्टी

Answer 6

विधि node.after( डॉक्टर ) दूसरे नोड के बाद एक नोड सम्मिलित करता है।

दो डोम नोड्स के लिए node1और node2,

node1.after(node2)के node2बाद सम्मिलित करता है node1।

यह विधि पुराने ब्राउज़रों में उपलब्ध नहीं है, इसलिए आमतौर पर एक पॉलीफिल की आवश्यकता होती है।

Comments

हालाँकि, वर्किंग इन्सर्ट के रूप में इसे लागू करने के लिए थोड़ा काम करना पड़ता है। हालांकि, दुर्भाग्य से मुझे नहीं लगता कि यह सही तरीके से काम करेगा।

— मिस्टर सिरकोड 12

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

इसकी वर्तमान में लिविंग स्टैंडर्ड्स में है और सेफ है।

असमर्थित ब्राउज़रों के लिए, इस Polyfill का उपयोग करें: 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

मैंने उस दृष्टिकोण के बारे में नहीं सोचा होगा। मैं @ karim79 के अधिक प्रत्यक्ष उत्तर का उपयोग करना चाहता हूं , लेकिन ध्यान में रखना अच्छा है।

— बेन जे

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 में लिखा गया था और चीजें अब अलग हो सकती हैं। इसलिए अपने हिसाब से फैसला करें।

जावास्क्रिप्ट डोम सम्मिलित करें (बाद में) विधि @ 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 करना होगा और बच्चों के अंत में यह कहां सम्मिलित करना होगा , क्योंकि इसे प्रारंभ में ही सम्मिलित करना होगा , अन्यथा ' घ इस समारोह के साथ शुरू स्थान पर डालने का कोई तरीका नहीं है; एक ही कारण 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

यह कोड एक छोटी सीएसएस फाइल को इनलाइन करने के आखिरी बच्चे के ठीक बाद एक लिंक आइटम डालने के लिए काम करता है

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 के एक मजबूत कार्यान्वयन।

// 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

जवाब के साथ कुछ स्पष्टीकरण जोड़ें कि यह उत्तर ओपी को वर्तमान मुद्दे को ठीक करने में कैसे मदद करता है

— ρяєρ withя K

ऊपर दिए गए कोड को चलाएं, फिर आप निर्दिष्ट रेफरेंस के बाद एक नया कोड डाल सकते हैं।

— ५

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)

परीक्षण करने के लिए एक सरल HTML कोड है:

<!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>

जैसा कि अपेक्षित था, यह डाउन तत्व के बाद ऊपर तत्व को स्थानांतरित करता है