गतिशील रूप से <div> और परिशिष्ट <div> बनाएं

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दोनों को जोड़ने से पहले आप बाहरी रूप से नए को बाहरी div में जोड़ सकते हैं <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

'अतिरिक्त मील' जाना कहानी का नैतिक था :-)!

के साथ भी अंतिम पंक्ति को छोटा कर सकते हैं: document.body.appendChild (iDiv);

— इदंन हव

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;

"चूहा जावास्क्रिप्ट" अगर मैंने इसे सही ढंग से किया। मेरे लिए सीधे काम करता है जब div और सामग्री स्वयं गतिशील नहीं होती है, या आप स्ट्रिंग को हेरफेर कर सकते हैं ताकि वह भी बदल जाए, हालांकि स्ट्रिंग हेरफेर "element.property = bla" दृष्टिकोण की तुलना में जटिल है, यह कुछ बहुत स्वागत करता है लचीलापन, और एक महान डिबगिंग टूल भी है :) उम्मीद है कि यह मदद करता है।

— जोर्ज अल नज्जर
स्रोत

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
स्रोत

आपको यह बताकर अच्छा लगा कि आप जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहे थे और यह कि आपका उदाहरण मूल प्रश्न की तुलना में अलग-अलग मार्कअप का उपयोग करता है।

— लूटने

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
स्रोत