innerHTML को वैकल्पिक

वोट
1

मैं एक तरह से लगता है कि मैं अपने कोड के साथ डोम कोस रही है ...

for(var i=0; i<json.length; ++i){       
    var newobj = document.createElement(div);
    var inner = <img src='+json[i].picture+' alt='Item preview' class='icon' />;

    inner += <p>+json[i].id+<br />qty:+json[i].qty;
    inner += <a href=\javascript:clearProduct('+json[i].id+')\>;
    inner += <img alt='Seperator' src='images/form-sep.gif' />;
    inner += <img src='images/cross.png' alt='Remove this item.' title='Remove this item.' />;
    inner += </a></p>;
    newobj.innerHTML = inner;
    newobj.className = cart_item;
    $('cartitems').appendChild(newobj);
    $('cartcount').innerHTML = json.length;
}

क्या ऐसा करने के लिए इससे अच्छा तरीका है? मेरा मतलब है, हाँ मैं जरिए सकता है और प्रत्येक तत्व के लिए createElement का उपयोग करें और प्रत्येक विशेषता अलग से स्थापित करने लेकिन यह है कि एक बहुत की तरह लगता है जब यह बहुत आसान है। क्या कोई बेहतर तरीका है?

28/06/2009 को 06:34
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


6 जवाब

वोट
2

मैं प्रोटोटाइप पता नहीं है, लेकिन मैं आम तौर पर इस तरह jQuery में मेरी वस्तुओं का निर्माण:

$("<p>").append(
  $("<img>")
  .attr("alt", "Sperator")
  .attr("src", "images/form-sep.gif")
).append(
  $("<img>")
  ... etc ...
)
28/06/2009 को 06:51
का स्रोत उपयोगकर्ता

वोट
2

आप उपयोग कर सकते हैं document.createElement()अपने डोम पेड़ में हर तत्व बनाने के लिए - लेकिन यह वास्तव में जिस तरह से अधिक clumsier होगा (हालांकि यकीनन अधिक "सही")। जिस तरह IE पर धीमी उल्लेख करने के लिए। डोम के संचालन IE के लिए बेहद सुस्त कर रहे हैं - मैं इस समस्या से पहले आई है। के माध्यम से तत्वों की एक पूरी गुच्छा नियत innerHTMLतेजी से इसके लिए परिमाण के कई आदेशों है। बेशक, आप यह है, तो आप बस कुछ तत्वों बना रहे हैं महसूस नहीं होगी। लेकिन एक 10x300 तालिका के लिए यह (मेरे पुराने Sempron 2200+ पीसी पर 10 से अधिक) कई सेकंड लेता है।

28/06/2009 को 07:03
का स्रोत उपयोगकर्ता

वोट
0

मैं innerHTML का उपयोग कभी नहीं। आप कोशिश करते हैं और innerHTML को तार संलग्न करें और फिर बाद में डोम वस्तुओं को देखें, तो आप IE में मुसीबत में पड़ सकते हैं। मैं innerHTML सुरक्षित रूप से कई मामलों में इस्तेमाल कर सकते हैं, लेकिन मैं करने के लिए कोई कारण नहीं देखते हैं। मेरे वरीय मुहावरा इस प्रकार प्रत्येक डोम वस्तु पाठ बनाने के लिए, और फिर संलग्न है:

var div = document.createElement('div');
div.appendChild(document.createTextNode('This is the inner text'));

हालांकि, मैं, कुछ रूपों का उपयोग कर तो मेरे कोड वास्तव में इस प्रकार दिखाई देगा:

var div = dec('div');
div.appendChild(dct('This is the inner text'));

मैं, appendChild () विधि को संक्षिप्त करने के लिए के रूप में अच्छी तरह के बाद से है कि इस तरह एक आम JavaScript विधि है, लेकिन अगर आप कोशिश करते हैं और एक .ac () विधि बनाने के द्वारा डोम बंदर-पैच आईई भी शिकायत करेंगे।

28/06/2009 को 07:12
का स्रोत उपयोगकर्ता

वोट
5

मैं एक अच्छा तत्व निर्माण इंटरफ़ेस बनाने के लिए करना चाहते; कुछ इस तरह:

function el( name, attrs ) {

    var elem = document.createElement(name),
        styles = attrs.style;

    for (var prop in styles) {
        try {
            elem.style[prop] = styles[prop];
        } catch(e) {}
    }

    for (var attr in attrs) {
        if (attr === 'style') { continue; }
        elem[attr] = attrs[attr];
    }

    return elem;

}


var myImage = el('img', {
    src: '/path/to/image.jpg',
    alt: 'Really cool image',
    style: {
        border: '1px solid red',
        padding: '10px'
    }
});
28/06/2009 को 07:32
का स्रोत उपयोगकर्ता

वोट
0

TBH, जब तक आप एक पूर्व लुढ़का पुस्तकालय का उपयोग कर रहे हैं (या पर्याप्त OCDish अपने स्वयं के बारे में कर रहे हैं), तो आप शायद सबसे अच्छा के रूप में आईई <8 एक महत्वपूर्ण कारक (है के लिए innerHTML का उपयोग कर बंद कर रहे हैं जो, कॉर्पोरेट आईटी की जड़ता दिया , एक लंबे समय हो जाएगा)। (शब्द शिथिल का उपयोग) IE में डोम कार्यान्वयन IE8 करने से पहले ऐसा है, तो गाड़ी अमानक और अधूरा है कि किसी भी कम से कम usably पूरा कोड सशर्त, और विशेष मामलों से अटे पड़े हो जाएगा।

Fwiw, मैं कोड है कि यह जहाँ तक संभव हो एक काम डोम संभालने के रूप में तब्दील हो, IE के लिए पोस्ट-हॉक Fixup कोड है कि केवल टूटा ब्राउज़र के लिए भरी हुई है के साथ किया साथ साथ एक डेटा वाच्यार्थ से HTML के निर्माण के लिए, यह स्पष्ट मिल गया है।

अपने कोड की तरह लग रहे हैं क्या करना है:

horus.appendChild
  ('cartitems',
   [ 'div', '.cart_item',
     [ 'img', { src: json[i].picture, alt: 'Item preview', classname: 'icon' } ],
     [ 'p', null,
       json[i].id, [ 'br' ], json[i].qty,
       [ 'a', { href: 'javascript:clearProduct('+json[i].id+')' },
         [ 'img', { alt: 'Seperator', src: 'images/form-sep.gif' } ],
         [ 'img', { src: 'images/cross.png', title: 'Remove this item.' } ] ] ] ]);

horus.childText('cartcount', json.length);

मैं हमारे पुस्तकालयों यहाँ उनकी पूरी तरह से पोस्ट है, लेकिन में देखने के लिए नहीं जा रहा हूँ यहाँ (, मांस के साथ 743 पर लाइन 574 से शुरु करके) यदि आप उत्सुक हैं, आईई फिक्स-अप कोड के साथ यहाँ

28/06/2009 को 08:06
का स्रोत उपयोगकर्ता

वोट
1

जब भी मैं जे एस के माध्यम से जटिल तत्व निर्माण कर रहा हूँ - मैं सामान्य रूप से प्रोटोटाइप को जोड़ विधि का उपयोग करें।

ऐसा करने के लिए, तत्व आप बना सकते हैं और प्रदर्शन के साथ अपने पृष्ठ के नीचे पर डाल करना चाहते हैं के लिए HTML में एक टेम्पलेट बनाने: कोई नहीं तो यह छिपा हुआ है। : फिर अपनी सामग्री के साथ विशिष्ट क्षेत्रों को बदलने के लिए प्रोटोटाइप का लगाना विधि का उपयोग http://www.prototypejs.org/api/string/interpolate यह दृश्यमान बनाने के लिए और कॉल शो () एचटीएमएल पर।

29/06/2009 को 05:10
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more