मैं नियमित जावास्क्रिप्ट के साथ प्रीपेन्ड और एपेंड को कैसे लागू कर सकता हूं?

Question

मैं jQuery का उपयोग किए बिना नियमित जावास्क्रिप्ट के साथ प्रीपेन्ड और एपेंड को कैसे लागू कर सकता हूं ?

Comments

मुझे समझ नहीं आ रहा है कि आपका क्या मतलब है।

— पकाका

@GenericTypeTea: तो मैंने लगभग उसी समय किया था ... अब मैं इसे अकेला छोड़ दूँगा!

— मार्क बायर्स

@ मर्क - आपका संपादन बेहतर था :)।

— djdd87

Answer 1

शायद आप DOM तरीकों के बारे में पूछ रहे हैं appendChildऔर insertBefore।

parentNode.insertBefore(newChild, refChild)

मौजूदा बच्चे नोड newChildसे parentNodeपहले एक बच्चे के रूप में नोड सम्मिलित करता है refChild। (लौटता है newChild।)

यदि refChildअशक्त है, newChildतो बच्चों की सूची के अंत में जोड़ा जाता है। समान रूप से, और अधिक आसानी से, उपयोग करें parentNode.appendChild(newChild)।

Comments

तो इस तरह मूल रूप से प्रीपेंड हैfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }

— मुहम्मद उमर

Answer 2

यहाँ एक स्निपेट है जिससे आप जा सकते हैं:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChildहमारे भीतर पहला तत्व के लिए एक संदर्भ दे देंगे theParentऔर डाल theKidयह पहले।

Comments

धन्यवाद, प्रीपेंड के लिए सिर्फ अतिरिक्त div बनाने के बिना InsertBefore का उपयोग क्यों करें? Grumdrig जवाब की तरह?

— योसेफ

यह एक तत्व बनाता है और इसे डोम में जोड़ता है, एपेंड करता है और अलग तरीके से काम करता है

— आंद्रेई क्रिस्टियन प्रोडन

मैं Grumdig के जवाब की तुलना में इस एक मिल

— एंड्रयू

यह 2015 है। क्या हमारे पास prepend()अभी तक निर्मित विधि है?

— 1.21 गीगावाट

Node.append या node.appendChild शून्य विधियां हैं, इसके स्थान पर InsertBefore (नोड, नल) का उपयोग करें

— सुहैब

Answer 3

आपने हमें यहां जाने के लिए बहुत कुछ नहीं दिया, लेकिन मुझे लगता है कि आप किसी तत्व की शुरुआत या अंत में सामग्री जोड़ने के लिए कह रहे हैं? यदि यहाँ है तो आप इसे बहुत आसानी से कैसे कर सकते हैं:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

बहुत आसान।

Comments

अच्छा, बस मैं जो देख रहा था।

— आंद्रेई क्रिस्टियन प्रोडन

@Munzilla यह विधि सभी मौजूदा बच्चों को फिर से पार्स करने के लिए ब्राउज़र को मजबूर करेगी। उपरोक्त समाधान में ब्राउज़र को दिए गए बच्चे को दस्तावेज़ में संलग्न करना होगा।

— स्याम काजी

Answer 4

यदि आप कोई कच्चा एचटीएमएल स्ट्रिंग डालना चाहते हैं, तो आप चाहे कितना भी जटिल हो, आप उसका उपयोग कर सकते हैं: insertAdjacentHTMLउपयुक्त प्रथम तर्क के साथ:

the बिफोरजिन ’ तत्व से पहले। तत्व के अंदर 'afterbegin' , अपने पहले बच्चे से पहले। 'पहले' तत्व के अंदर, अपने आखिरी बच्चे के बाद। 'आफ्टरएंड' तत्व के बाद।

संकेत: आप Element.outerHTMLHTML स्ट्रिंग को सम्मिलित करने के लिए तत्व को प्रस्तुत करने के लिए हमेशा कॉल कर सकते हैं ।

उपयोग का एक उदाहरण:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

डेमो

सावधानी: insertAdjacentHTML श्रोताओं को संरक्षित नहीं करता है, जहां से जुड़ा हुआ है .addEventLisntener।

Comments

" insertAdjacentHTMLश्रोताओं को संरक्षित नहीं करता है ..." क्या श्रोताओं? यह HTML है, इसलिए किसी भी तत्व को बांधने के लिए अभी तक नहीं हैं। यदि आप मौजूदा तत्वों का उल्लेख कर रहे हैं foo, तो यह एक सही कथन नहीं है। पूरी बात .insertAdjacentHTMLयह है कि यह श्रोताओं को संरक्षित करता है। आप शायद सोच रहे हैं .innerHTML += "...", जो पुराने डोम नोड्स को नष्ट कर देता है।

— spanky

@spanky आप सही हैं कि इस कथन को कई तरीकों से व्याख्यायित किया जा सकता है, जिसका मैं वास्तव में मतलब है कि DOM नोड्स नए सिरे से बनाए गए थे insertAdjacentHTML(रूट और न ही मौजूदा मूल के वंशज नहीं)

— Artur grzesiak

Answer 5

मैंने इसे अपनी परियोजना में जोड़ा है और यह काम करता है:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

उदाहरण:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

Answer 6

अपने जीवन को सरल बनाने के लिए आप HTMLElementवस्तु का विस्तार कर सकते हैं । यह पुराने ब्राउज़रों के लिए काम नहीं कर सकता है, लेकिन निश्चित रूप से आपके जीवन को आसान बनाता है:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

तो अगली बार आप ऐसा कर सकते हैं:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

Comments

क्या होगा यदि नोड में कोई बच्चा नोड नहीं है? उस स्थिति में फर्स्ट चाइल्ड शून्य होगा

— felixfbecker

Prepend पहले से मौजूद है, ParentNode.prepend () देखें, इसलिए prependChild बनाने के लिए यह prnt.prepend (chld) को कॉल करने के लिए पर्याप्त है

— Igor Fomenko

Answer 7

दस्तावेज़ में एक पैराग्राफ जोड़ने के लिए प्रीपेन्ड का उपयोग करने का एक उदाहरण यहां दिया गया है।

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

परिणाम:

<p>Example text</p>

Answer 8

2017 में मैं एज 15 और आईई 12 के लिए जानता हूं, प्रीपेंड पद्धति में दिव्य तत्वों के लिए एक संपत्ति के रूप में शामिल नहीं है, लेकिन अगर किसी को मेरे द्वारा किए गए फ़ंक्शन को पॉलीफ़िल करने के लिए त्वरित संदर्भ की आवश्यकता है:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

सरल तीर फ़ंक्शन जो अधिकांश आधुनिक ब्राउज़रों के साथ संगत है।

Answer 9

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

यदि रेफरेंसमेंट शून्य, या अपरिभाषित है, तो न्यू ई क्लीमेंट को चाइल्ड नोड्स की सूची के अंत में डाला जाता है।

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

उदाहरण यहां देखे जा सकते हैं: Node.insertBefore

Answer 10

किसी सूची को प्रस्तुत करने के लिए आप अनशिफ्ट () का भी उपयोग कर सकते हैं

Answer 11

यह करने का सबसे अच्छा तरीका नहीं है, लेकिन अगर कोई भी सब कुछ से पहले एक तत्व सम्मिलित करना चाहता है, तो यहां एक तरीका है।

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);