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

Question

मैं बटन के प्रत्येक क्लिक पर jquery का उपयोग करते हुए पहले तत्व के रूप में एक div जोड़ना चाहता हूं

<div id='parent-div'>
    <!--insert element as a first child here ...-->

    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>

</div> 

Comments

इस प्रश्न के उत्तर बाल-दिव्य तत्वों की एक खाली सूची के साथ भी काम करते हैं। महान!

— रोलैंड

Answer 1

$.prepend()फ़ंक्शन का प्रयास करें ।

प्रयोग

$("#parent-div").prepend("<div class='child-div'>some text</div>");

डेमो

var i = 0;
$(document).ready(function () {
    $('.add').on('click', function (event) {
        var html = "<div class='child-div'>some text " + i++ + "</div>";
        $("#parent-div").prepend(html);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="parent-div">
    <div>Hello World</div>
</div>
<input type="button" value="add" class="add" />

Comments

इस समाधान के साथ समस्या यह है कि यह पहले बच्चे के रूप में सम्मिलित करता है और बच्चों की सूची से पहले नहीं, यदि माता-पिता के कंटेनर में अलग-अलग बच्चे तत्व होते हैं और एक बच्चे के विशिष्ट समूह से पहले सम्मिलित करना चाहता है, तो यह काम नहीं करेगा।

— अरोवरता

सबसे पहले, यह मेरे लिए स्पष्ट नहीं था कि यह समाधान भी काम करता है यदि शून्य बाल-दिव्य तत्व हैं। प्रीपेंड () खाली सूची में सम्मिलित होगा और पहला चाइल्ड-डिव तत्व बनाएगा। बेशक, एपेंड () भी काम करता है, लेकिन सूची दूसरे क्रम में बनाई गई है।

— रोलैंड

Answer 2

@Vabhatia ने जो कहा, उस पर विस्तार करते हुए, आप देशी जावास्क्रिप्ट (JQuery के बिना) में यही चाहते हैं।

ParentNode.insertBefore(<your element>, ParentNode.firstChild);

Answer 3

का उपयोग करें: $("<p>Test</p>").prependTo(".inner"); की जाँच करें jquery.com पर .prepend प्रलेखन

Comments

यह प्रत्येक बच्चे से पहले एक से अधिक नोड्स सम्मिलित करेगा।

— अरूव्रत

Answer 4

parentNode.insertBefore(newChild, refChild)

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

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

Comments

सचमुच एक और पोस्ट से कॉपी और पेस्ट किया गया। शायद विशिष्ट प्रश्न का संदर्भ दें और यह कैसे संबंधित है?

— रॉबर्टबुटिंगर

Answer 5

parentElement.prepend(newFirstChild);

यह (संभावना) ES7 में एक नया जोड़ है। यह अब वैनिला जेएस है, शायद jQuery में लोकप्रियता के कारण। यह वर्तमान में क्रोम, एफएफ और ओपेरा में उपलब्ध है। जब तक यह हर जगह उपलब्ध नहीं हो जाता तब तक ट्रांसप्लर्स को इसे संभालने में सक्षम होना चाहिए।

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

parentElement.prepend('This text!');

लिंक: developer.mozilla.org - पॉलीफ़िल

Answer 6

यहाँ आवश्यक है

<div class="outer">Outer Text <div class="inner"> Inner Text</div> </div>

द्वारा जोड़ा

$(document).ready(function(){ $('.inner').prepend('<div class="middle">New Text Middle</div>'); });

Answer 7

$(".child-div div:first").before("Your div code or some text");

Comments

चाइल्ड-डिव के नीचे बच्चे नोड्स नहीं हैं

— अरोविराट

Answer 8

$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");

Comments

यह प्रत्येक बच्चे से पहले सम्मिलित होगा , यानी आप कई नोड्स सम्मिलित करेंगे।

— अरोवरता