প্রথম শিশু হিসাবে কীভাবে উপাদান sertোকানো যায়?

Question

আমি একটি বোতামের প্রতিটি ক্লিকে jquery ব্যবহার করে একটি উপাদান প্রথম উপাদান হিসাবে যুক্ত করতে চাই

<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

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

— অরওব্রত

প্রথমদিকে, আমার কাছে এটি স্পষ্ট ছিল না যে শূন্য শিশু-বিভাগ উপাদান থাকলে এই সমাধানটিও কাজ করে। প্রিপেন্ড () খালি তালিকায় sertোকানো হবে এবং প্রথম চাইল্ড-ডিভ উপাদান তৈরি করবে। অবশ্যই, পরিশিষ্ট () এছাড়াও কাজ করে তবে তালিকাটি অন্য ক্রমে তৈরি করা হয়েছে।

— রোল্যান্ড

Answer 2

@ ভাভাটিয়া যা বলেছে তার প্রসারিত করে, আপনি স্থানীয় জাভাস্ক্রিপ্টে এটি চান (জিকুয়ারি ছাড়াই)।

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

Answer 3

ব্যবহার করুন: $("<p>Test</p>").prependTo(".inner"); পরীক্ষা করে দেখুন jquery.com উপর .prepend ডকুমেন্টেশন

Comments

এটি প্রতিটি সন্তানের আগে একাধিক নোড sertোকাবে।

— অরওব্রত

Answer 4

parentNode.insertBefore(newChild, refChild)

বিদ্যমান চাইল্ড নোড রেফচিল্ডের আগে প্যারেন্টনোডের শিশু হিসাবে নোড নতুনচিল্ড সন্নিবেশ করান। (নতুন শিশু ফিরে আসে))

যদি রেফচাইল্ড নাল হয় তবে বাচ্চাদের তালিকার শেষে নিউচিল্ড যুক্ত করা হয়। সমানভাবে এবং আরও সহজে পাঠযোগ্য, প্যারেন্টনোড.এপেন্ডচিল্ড (নতুনচিল্ড) ব্যবহার করুন।

Comments

আক্ষরিক অনুলিপি এবং অন্য পোস্ট থেকে আটকানো। সম্ভবত নির্দিষ্ট প্রশ্নের রেফারেন্স দিন এবং এটি কীভাবে সম্পর্কিত?

— রবার্থট্টিংগার

Answer 5

parentElement.prepend(newFirstChild);

এটি (সম্ভবত) ইএস 7-এ একটি নতুন সংযোজন। এটি এখন ভ্যানিলা জেএস, সম্ভবত jQuery এর জনপ্রিয়তার কারণে। এটি বর্তমানে ক্রোম, এফএফ এবং অপেরাতে উপলব্ধ। ট্রান্সপোর্টাররা এটি সর্বত্র উপলব্ধ না হওয়া পর্যন্ত এটি পরিচালনা করতে সক্ষম হওয়া উচিত।

পিএস আপনি সরাসরি স্ট্রিংগুলি প্রেন্ডিং করতে পারেন

parentElement.prepend('This text!');

লিঙ্কগুলি: বিকাশকারী.মোজিলা.অর্গ - পলিফিল

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

এটি প্রতিটি সন্তানের আগে সন্নিবেশ করবে , অর্থাৎ আপনি একাধিক নোড সন্নিবেশ করবেন।

— অরব্রত