पहले बच्चे के रूप में डोम तत्व कैसे सेट करें?

Question

मेरे पास ई तत्व है और मैं इसमें कुछ तत्वों को जोड़ रहा हूं। अचानक, मुझे पता चला कि अगला तत्व ई का पहला बच्चा होना चाहिए। चाल क्या है, इसे कैसे करें? विधि unshift काम नहीं करता है क्योंकि E एक ऑब्जेक्ट है, न कि सरणी।

लंबा रास्ता गर्त ई के बच्चों और it'em कुंजी ++ को स्थानांतरित करने के लिए होगा, लेकिन मुझे यकीन है कि वहाँ एक सुंदर तरीका है।

Comments

तुम लोग तेज हो! मुझे क्षमा करें, मुझे लगता है कि मुझे गलत समझा गया। एलिमेंट ई | - चाइल्ड-एल_1 - | चाइल्ड-एल २- | चाइल्ड-एल_३ और फिर आता है चाइल्ड-एल_४ ... जिसे पहले बच्चे की तरह फिट होने की जरूरत है। प्रीपेंड [b] ई [/ b] से पहले बच्चे- el_4 लगाएगा, क्या मैं गलत और थका हुआ हूं या क्या?

— पोपारा

Answer 1

var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);

Comments

तुम मेरे दोस्त, बस अपने आप को एक भालू मिल गया! उपयोगी अतिरिक्त खोज। docs.jquery.com/Manipulation/insertBefore

— Popara

जानकारी के लिए यदि माता-पिता में कोई तत्व नहीं है तो बच्चे को वैसे भी जोड़ा जाएगा।

— क्नू

FirstChild के मामले में पाठ नोड अपवाद फेंकता है। लेकिन jquery ने पहले से न सोचा था।

— सेर्गेई सहक्यान

@Sergey, मेरे लिए टेक्स्ट नोड के साथ भी काम करता है, फ़ायरफ़ॉक्स और क्रोमियम पर परीक्षण किया गया है। आपने किस ब्राउज़र का उपयोग किया? क्या आप सुनिश्चित हैं कि समस्या आपकी तरफ नहीं थी? क्या आप एक स्निपेट / jsfiddle तैयार करने की परवाह करेंगे जो समस्या को पुन: पेश करता है?

— यूजर

list.outerHTML = entry.outerHTML + list.outerHTML; आशा किसी की मदद करती है।

— डेनिज़ पोर्सुक

Answer 2

2017 संस्करण

आप उपयोग कर सकते हैं

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

से MDN :

InsertAdjacentElement () विधि किसी दिए गए स्थान पर किसी दिए गए तत्व के नोड को उस तत्व के सापेक्ष सम्मिलित करती है जिस पर इसे लागू किया जाता है।

स्थिति
ए DOMString तत्व के सापेक्ष स्थिति का प्रतिनिधित्व करती है; निम्नलिखित तारों में से एक होना चाहिए
beforebegin: तत्व से पहले।
afterbegin: तत्व के अंदर, अपने पहले बच्चे से पहले।
beforeend: बस तत्व के अंदर, अपने आखिरी बच्चे के बाद।
afterend: तत्व के बाद।

element
पेड़ में डाला जाने वाला तत्व।

इसके अलावा insertAdjacentवहाँ के परिवार में सहोदर विधियाँ हैं:

element.insertAdjacentHTML('afterbegin','htmlText')HTML स्ट्रिंग को सीधे इंजेक्ट करने के लिए, innerHTMLलेकिन जैसे सब कुछ खत्म हो गया है, इसलिए आप दमनकारी प्रक्रिया को document.createElementभी कूद सकते हैं और यहां तक ​​कि पूरे जोड़तोड़ को जोड़ तोड़ प्रक्रिया के साथ बना सकते हैं

element.insertAdjacentTextइंजेक्शन के लिए तत्व में स्ट्रिंग को संजीवनी दें। अब और नहींencode/decode

Comments

महान सुझाव लेकिन क्यों "2017 को वापस", यह भी एक मानक तरीका है ie8 पर

— विटाली Terziev

धन्यवाद। और आपकी जानकारी के लिए एक और धन्यवाद। शीर्षक लोगों को जल्दी से भेद करने में मदद करने के लिए है जो कि नया उत्तर है

— पेरी मिमोन

क्या होगा अगर तत्व = document.importNode (डॉक्यूमेंटफ्रैगमेंट, ट्रू)?

— मार्टिन मीसर

उस वापसी elementटाइपोफ़ में document-fragmentजो नहीं है insertAdjacent...()। जब तक हम एक बेहतर जवाब है अपने सर्वोत्तम अनुमान को संलग्न करने के लिए है fragmentएक करने के लिए div। अपने डोम हेरफेर करें और फिर उपयोग करें Range.selectNodeContents()और Range.extractContents()एक टुकड़ा वापस पाने के लिए

— पेरी मिमोन

जहाँ 'एलिमेंट' वह एलिमेंट है जिसमें आप जोड़ना चाहते हैं, और 'एलिमेंट' वह एलिमेंट है जिसे आप जोड़ना चाहते हैं;)

— bokkie

Answer 3

2018 संस्करण

parentElement.prepend(newFirstChild)

यह आधुनिक जेएस है! यह पिछले विकल्पों की तुलना में अधिक पठनीय है। यह वर्तमान में क्रोम, एफएफ और ओपेरा में उपलब्ध है।

PS आप सीधे स्ट्रिंग्स को प्रीपेंड कर सकते हैं

parentElement.prepend('This text!')

developer.mozilla.org

क्या मैं उपयोग कर सकता हूं - 94% मई 2020

polyfill

Comments

महान समाधान, धन्यवाद! यह मुझे परेशान करता है कि उन्होंने अंत में एक बच्चे को जोड़ने का फैसला किया, .appendChild()लेकिन शुरुआत में इसे जोड़ने के .prepend()बजाय सम्मेलन से चिपके रहने और इसे कॉल करने के लिए है.prependChild()

— Marquizzo

append()साथ ही मौजूद है, वैसे ही काम करता है prepend(), लेकिन अंत में

— गिबोल्ट

मैं भी भ्रमित हो गया जब मैंने इन सवालों को लागू करने के बारे में पूछा, prependजबकि मैंने पाया कि यह पहले से ही है। :( ठीक है, यह अतीत में मौजूद नहीं था।

— रिक

Answer 4

आप इसे सीधे लागू कर सकते हैं मैं अपने सभी विंडो HTML तत्वों को।
ऐशे ही :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};

Comments

prependएक प्रोटोटाइप की आवश्यकता के बिना वेनिला जेएस समकक्ष है। यह ES7 में मानक होगा, और आपको अपने आवेदन के लिए यदि संभव हो तो उपयोग करना चाहिए

— गिबोल्ट

Answer 5

एक समारोह में स्वीकार किए गए उत्तर को स्वीकार:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}

Comments

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

— 49 पर uri

Answer 6

जब तक मुझे गलतफहमी न हो:

$("e").prepend("<yourelem>Text</yourelem>");

या

$("<yourelem>Text</yourelem>").prependTo("e");

यद्यपि यह आपके विवरण से लगता है कि कुछ शर्त जुड़ी हुई है, इसलिए

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}

Comments

$ संस्करण के लिए +1! मैं एक jQuery का विस्तार func लिख रहा हूँ, इसलिए जब भी मैं प्रदर्शन कारणों के लिए देशी संस्करण का उपयोग करूँगा, लेकिन यह एकदम सही है!

— टेलर इवानसन

ना, वह जावास्क्रिप्ट की तलाश में है, न कि jquery की।

— विन्नेल

Answer 7

मुझे लगता है कि आप jQuery में .prepend फ़ंक्शन की तलाश कर रहे हैं । उदाहरण कोड:

$("#E").prepend("<p>Code goes here, yo!</p>");

Comments

तुम लोग तेज हो! मुझे क्षमा करें, मुझे लगता है कि मुझे गलत समझा गया। एलिमेंट ई | - चाइल्ड-एल_1 - | चाइल्ड-एल २- | चाइल्ड-एल_३ और फिर आता है चाइल्ड-एल_४ ... जिसे पहले बच्चे की तरह फिट होने की जरूरत है। प्रीपेंड [b] ई [/ b] से पहले बच्चे- el_4 लगाएगा, क्या मैं गलत और थका हुआ हूं या क्या?

— पोपारा

Answer 8

मैंने मूल तत्वों को तत्वों को प्रस्तुत करने के लिए इस प्रोटोटाइप का निर्माण किया।

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};

Answer 9

var newItem = document.createElement("LI");       // Create a <li> node
var textnode = document.createTextNode("Water");  // Create a text node
newItem.appendChild(textnode);                    // Append the text to <li>

var list = document.getElementById("myList");    // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);  // Insert <li> before the first child of <ul>

https://www.w3schools.com/jsref/met_node_insertbefore.asp