<ডিভ> তৈরি করুন এবং গতিশীলভাবে <ডিআইভি> যুক্ত করুন

128

আমি ভিতরে <div>সংযুক্ত করে একটি গতিশীল তৈরি করার চেষ্টা করছি <div>। আমার এখন পর্যন্ত এটি যা কাজ করে:

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

প্রথম ডিভের সাথে দ্বিতীয় ডিভিটি তৈরি এবং সংযোজন করতে আমার কেবল সমস্যা হচ্ছে।

আমি মূলত চূড়ান্ত মার্কআপ হিসাবে এটি করতে চাই:

<div id="block" class="block">
   <div class="block-2"></div>
</div>

javascript

— মাইকেল বারকোভস্কি
সূত্র

19

এটি শরীরের উপাদান পাওয়ার এক অদ্ভুত উপায় ... কেবল ব্যবহার করুন document.body।

— গুফা

234

একই প্রক্রিয়া ব্যবহার করুন। আপনার ইতিমধ্যে ভেরিয়েবল রয়েছে iDivযা এখনও <div id='block'>আপনার তৈরি করা মূল উপাদানটিকে বোঝায় । আপনার কেবল অন্যটি তৈরি <div>এবং কল করা দরকারappendChild() ।

// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

http://jsfiddle.net/W4Sup/1/

ইভেন্ট তৈরির ক্রমটি আমার উপরে এটির মতো হবে না। আপনি innerDivদুটিতে যোগ করার আগে আপনি বিকল্পভাবে বাইরের ডিভিতে নতুন যুক্ত করতে পারেন <body>।

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

// Create the inner div before appending to the body
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

// Then append the whole thing onto the body
document.getElementsByTagName('body')[0].appendChild(iDiv);

— মাইকেল বারকোভস্কি
সূত্র

3

'অতিরিক্ত মাইল' যাওয়া গল্পটির নৈতিকতা ছিল :-)!

এর সাথে শেষ লাইনটিও ছোট করা যায়: ডকুমেন্ট.বিডি.এপেন্ডচিল্ড (আইডিআইভি);

— ইডান হাভ

8

var iDiv = document.createElement('div');

iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

var div2 = document.createElement('div');

div2.className = 'block-2';
iDiv.appendChild(div2);

— মোয়াজ্জাম খান
সূত্র

মাইকেল বারকোভস্কি

— অলিভার

3

আমি মনে করি না যে আমি এটি করতে পারতাম। সাধারণ সমাধানগুলিতে সাধারণত কম বৈকল্পিক থাকে: ডি।

— মোয়াজ্জাম খান

4

var iDiv = document.createElement('div'),
    jDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
jDiv.className = 'block-2';
iDiv.appendChild(jDiv);
document.getElementsByTagName('body')[0].appendChild(iDiv);

— austincheney
সূত্র

3

ভাল, আমি জানি না এটি কতটা গতিশীল, তবে কখনও কখনও এটি আপনার ডিবাগিং জীবন বাঁচাতে পারে:

var daString="<div id=\'block\' class=\'block\'><div class=\'block-2\'></div></div>";
var daParent=document.getElementById("the ID of whatever your parent is goes in here");
daParent.innerHTML=daString;

"ইঁদুর জাভাস্ক্রিপ্ট" যদি আমি এটি সঠিকভাবে করি। আমার জন্য সরাসরি কাজ করে যখন ডিভ এবং বিষয়বস্তুগুলি অবশ্যই গতিশীল না হয়, বা আপনি এটি পরিবর্তন করতে স্ট্রিংটিও পরিচালনা করতে পারেন, যদিও স্ট্রিং ম্যানিপুলেটিং "এলিমেন্ট.প্রোপার্টি = বিএল" পদ্ধতির চেয়ে জটিল, এটি কিছুটা স্বাগত জানায় নমনীয়তা এবং এটি একটি দুর্দান্ত ডিবাগিং সরঞ্জামও :) আশা করি এটি সহায়তা করবে।

— জর্জে আল নাজ্জার
সূত্র

2

var i=0,length=2;

     for(i; i<=length;i++)
 {
  $('#footer-div'+[i]).append($('<div class="ui-footer ui-bar-b ui-footer-fixed slideup" data-theme="b" data-position="fixed" data-role="footer" role="contentinfo" ><h3 class="ui-title" role="heading" aria-level="1">Advertisement </h3></div>')); 

 }

— user2563247
সূত্র

আপনি একটি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করছেন এবং এটির উদাহরণটি মূল প্রশ্নের চেয়ে আলাদা মার্কআপ ব্যবহার করে to

— ছিনিয়ে নিন

2

window.onload = function() {
  var iDiv = document.createElement('div');
  iDiv.id = 'block';
  iDiv.className = 'block';
  document.body.appendChild(iDiv);

  var iiDiv = document.createElement('div');
  iiDiv.className = 'block-2';

  var s = document.getElementById('block');
  s.appendChild(iiDiv);
}

— মুহাম্মদ তালহা আকবর
সূত্র

1

var arrayDiv = new Array();
    for(var i=0; i <= 1; i++){
        arrayDiv[i] = document.createElement('div');
        arrayDiv[i].id = 'block' + i;
        arrayDiv[i].className = 'block' + i;
    }
    document.body.appendChild(arrayDiv[0].appendChild(arrayDiv[1]));

— ইও মিজো
সূত্র

0

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

var iDiv2 = document.createElement('div');
iDiv2.className = "block-2";

iDiv.appendChild(iDiv2);
// Append to the document last so that the first append is more efficient.
document.body.appendChild(iDiv);

— মিত্র
সূত্র

0

    while(i<10){
               $('#Postsoutput').prepend('<div id="first'+i+'">'+i+'</div>');
               /* get the dynamic Div*/
               $('#first'+i).hide(1000);
               $('#first'+i).show(1000);
                i++;
                }

— Amine_Dev
সূত্র