दिलचस्प पोस्ट
जावास्क्रिप्ट में बहु मान लौटें? जावा में XPath के साथ XML को पार्स करना JQuery AJAX के माध्यम से एक साथ फॉर्मडाटा और स्ट्रिंग डेटा भेजें? IOException: प्रक्रिया फ़ाइल 'फ़ाइल पथ' का उपयोग नहीं कर सकती क्योंकि यह किसी अन्य प्रक्रिया द्वारा उपयोग की जा रही है जावा प्रोग्राम में Sqoop का उपयोग कैसे करें? जावा 8 के रूप में डिफ़ॉल्ट विधियों: सुरक्षित? मॉडल डायलॉग कीबोर्ड काट नहीं करता है रूबी में शुरू, बचाव और सुनिश्चित करें? एसक्यूएल परिणाम (या तो माइस्किल या पर्ल अंत पर) में रिक्त तिथियों के पैड का सबसे सीधा तरीका क्या है? मुझे C ++ में एकाधिक विरासत से क्यों बचाना चाहिए? क्या मैं एक ही दृश्य पर setframe और autolayout का उपयोग कर सकता हूं? JPanel करने के लिए एक JLabel जोड़ना है JPanel "छिपाना"? Xml का पुनर्निर्देशन रोकें एक साथ रिकॉर्ड करें और ऑडियो चलाएं वेबपैक के साथ लोकेल लोड करने से पल। जेएस को कैसे रोकें?

jQuery के दस्तावेज़। सिक्रेट एलेमेंट समकक्ष?

मैं कुछ पुराने जावास्क्रिप्ट कोड को फिर से इस्तेमाल कर रहा हूं और बहुत सारे डोम हेरफेर चल रहा है।

var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t); 

मैं जानना चाहूंगा कि क्या यह jQuery का उपयोग करने के लिए एक बेहतर तरीका है। मैं इसके साथ प्रयोग कर रहा हूं:

 var odv = $.create("div"); $.append(odv); // And many more 

लेकिन मुझे यकीन नहीं है कि यह बेहतर होगा।

वेब के समाधान से एकत्रित समाधान "jQuery के दस्तावेज़। सिक्रेट एलेमेंट समकक्ष?"

यहाँ आपके उदाहरण "एक" लाइन में है

 this.$OuterDiv = $('<div></div>') .hide() .append($('<table></table>') .attr({ cellSpacing : 0 }) .addClass("text") ) ; 

अद्यतन : मैंने सोचा कि मैं इस पोस्ट को अपडेट करूँगा, क्योंकि यह अभी भी काफी यातायात है। नीचे दिए गए टिप्पणियों में $("<div>") बनाम $("<div></div>") बनाम $(document.createElement('div')) बारे में कुछ चर्चाएं हैं, और नए तत्वों को बनाने का एक तरीका है, और जो "सर्वश्रेष्ठ" है

मैंने एक छोटा सा बेंचमार्क रखा है, और यहां लगभग 100,000 बार उपरोक्त विकल्प दोहराते हुए परिणाम हैं:

jQuery 1.4, 1.5, 1.6

  Chrome 11 Firefox 4 IE9 <div> 440ms 640ms 460ms <div></div> 420ms 650ms 480ms createElement 100ms 180ms 300ms 

jQuery 1.3

  Chrome 11 <div> 770ms <div></div> 3800ms createElement 100ms 

jQuery 1.2

  Chrome 11 <div> 3500ms <div></div> 3500ms createElement 100ms 

मुझे लगता है कि यह कोई बड़ा आश्चर्य नहीं है, लेकिन document.createElement सबसे तेज़ तरीका है बेशक, इससे पहले कि आप अपने संपूर्ण कोडबेस को फिर से शुरू करें और फिर से दोबारा शुरू करें, याद रखें कि हम जो अंतर यहां बोल रहे हैं (jQuery के पुराने संस्करणों के साथ-साथ) हजार तत्वों के अतिरिक्त एक अतिरिक्त 3 मिलीसेकेंड

अपडेट 2

JQuery 1.7.2 के लिए अपडेट किया गया और JSBen.ch पर बेंचमार्क डाल दिया जो शायद मेरे आदिम मानक की तुलना में थोड़ा अधिक वैज्ञानिक है, प्लस यह अब भीड़-भाड़ में हो सकता है!

http://jsben.ch/#/ARUtz

बस तत्वों के HTML की सहायता से आप एक jQuery कन्स्ट्रक्टर $() जोड़ना चाहते हैं, jQuery के append() विधि का उपयोग करके डोम में जोड़ा जाने के लिए उपयुक्त नए निर्मित HTML से एक jQuery ऑब्जेक्ट वापस करेगा।

उदाहरण के लिए:

 var t = $("<table cellspacing='0' class='text'></table>"); $.append(t); 

यदि आप चाहें, तो आप इस तालिका को प्रोग्रामेटिक रूप से पॉप्युलेट कर सकते हैं।

यह आपको किसी भी मनमाना HTML को निर्दिष्ट करने की क्षमता देता है, जिसमें वर्ग के नाम या अन्य विशेषताओं शामिल हैं, जो कि आप createElement उपयोग से अधिक संक्षिप्त प्राप्त कर सकते हैं और फिर cellSpacing और className जैसे जेएस के माध्यम से सेटिंग कर सकते हैं।

नया डोम तत्व बनाना, jQuery() विधि की मुख्य विशेषता है, देखें:

चीयर्स।

jQuery1.8 बाद से, तत्वों को बनाने के लिए $.parseHTML() का उपयोग करना एक बेहतर विकल्प है।

दो लाभ हैं:

1. यदि आप पुराने तरीके का उपयोग करते हैं, जो $(string) तरह कुछ हो सकता है, तो jQuery यह सुनिश्चित करने के लिए स्ट्रिंग की जांच करेगा कि आप HTML टैग का चयन करना चाहते हैं या एक नया तत्व बना सकते हैं $.parseHTML() का उपयोग करके, आप jQuery को बताते हैं कि आप स्पष्ट रूप से एक नया तत्व बनाना चाहते हैं, इसलिए प्रदर्शन थोड़ा बेहतर हो सकता है

2. अधिक महत्वपूर्ण बात यह है कि यदि आप पुराने तरीके से उपयोग करते हैं, तो आप क्रॉस साइट हमले ( अधिक जानकारी ) से पीड़ित हो सकते हैं। अगर आपके पास कुछ ऐसा है:

  var userInput = window.prompt("please enter selector"); $(userInput).hide(); 

एक बुरे आदमी आप को चिढ़ाने के लिए इनपुट <script src="xss-attach.js"></script> कर सकते हैं सौभाग्य से, $.parseHTML() लिए इस शर्मिंदगी से बचें:

 var a = $('<div>') // a is [<div>​</div>​] var b = $.parseHTML('<div>') // b is [<div>​</div>​] $('<script src="xss-attach.js"></script>') // jQuery returns [<script src=​"xss-attach.js">​</script>​] $.parseHTML('<script src="xss-attach.js"></script>') // jQuery returns [] 

हालांकि, कृपया ध्यान दें कि a एक jQuery ऑब्जेक्ट है जबकि b एक html तत्व है:

 a.html('123') // [<div>​123​</div>​] b.html('123') // TypeError: Object [object HTMLDivElement] has no method 'html' $(b).html('123') // [<div>​123​</div>​] 

मैं document.createElement('div') का उपयोग कर रहा हूं document.createElement('div') साथ में jQuery साथ तेज़ है:

 $( document.createElement('div') ,{ text: 'Div text', 'class': 'className' }).appendTo('#parentDiv'); 

मैं ऐसा कर रहा हूं:

 $('<div/>',{ text: 'Div text', class: 'className' }).appendTo('#parentDiv'); 

हालांकि यह एक बहुत पुराना सवाल है, मैंने सोचा कि यह हाल ही की जानकारी के साथ इसे अद्यतन करने के लिए अच्छा होगा;

चूंकि jQuery 1.8 एक jQuery.parseHTML () फ़ंक्शन है जो अब तत्वों को बनाने का एक पसंदीदा तरीका है साथ ही, $('(html code goes here)') माध्यम से HTML के पार्सिंग के साथ कुछ समस्याएं हैं, उदाहरण के लिए आधिकारिक jQuery की वेबसाइट उनके एक रिलीज नोट्स में निम्नलिखित का उल्लेख करती है:

आराम से एचटीएमएल पार्सिंग: $ (html स्ट्रिंग) में टैग करने से पहले आपको एक बार फिर से रिक्त स्थान या न्यूलाइंस मिल सकता है। हम अब भी दृढ़ता से सलाह देते हैं कि आप $ .parseHTML () का प्रयोग करते हैं, जब बाह्य स्रोतों से प्राप्त HTML को पार्स करते हैं, और भविष्य में HTML पार्सिंग में और बदलाव कर रहे हैं।

वास्तविक प्रश्न से संबंधित, उदाहरण के लिए इसका अनुवाद किया जा सकता है:

 this.$OuterDiv = $($.parseHTML('<div></div>')) .hide() .append($($.parseHTML('<table></table>')) .attr({ cellSpacing : 0 }) .addClass("text") ) ; 

जो दुर्भाग्य से सिर्फ $() का उपयोग करने से कम सुविधाजनक है, लेकिन यह आपको अधिक नियंत्रण देता है, उदाहरण के लिए आप स्क्रिप्ट टैग को छोड़ने का चयन कर सकते हैं (हालांकि onclick स्क्रिप्ट जैसे onclick छोड़ देंगे):

 > $.parseHTML('<div onclick="a"></div><script></script>') [<div onclick=​"a">​</div>​] > $.parseHTML('<div onclick="a"></div><script></script>', document, true) [<div onclick=​"a">​</div>​, <script>​</script>​] 

इसके अलावा, यहां शीर्ष वास्तविकता से एक बेंचमार्क समायोजित किया गया है:

जेएसबीन लिंक

jQuery 1.9.1

   $ .परस HTML: 88ms
   $ ($। parse HTML): 240ms
   <div> </ div>: 138ms
   <div>: 143ms
   बनाएँ एलेमेंट: 64 एमएमएस

ऐसा लगता है कि parseHTML $() तुलना में createElement बहुत करीब है, लेकिन सभी createElement एक नया jQuery ऑब्जेक्ट में परिणाम लपेटने के बाद चला गया है

 var mydiv = $('<div />') // also works 
 var div = $('<div/>'); div.append('Hello World!'); 

JQuery में एक DIV तत्व बनाने का सबसे छोटा / सबसे आसान तरीका है।

यह सब बहुत सीधे आगे है! एक त्वरित त्वरित उदाहरण …


 var $example = $( XMLDocRoot ); 

 var $element = $( $example[0].createElement('tag') ); // Note the [0], which is the root $element.attr({ id: '1', hello: 'world' }); 

 var $example.find('parent > child').append( $element ); 

मैंने इसके लिए सिर्फ एक छोटा jQuery प्लगइन बनाया है: https://github.com/ern0/jquery.create

यह आपके वाक्यविन्यास का पालन करता है:

 var myDiv = $.create("div"); 

डोम आईडी दूसरे पैरामीटर के रूप में निर्दिष्ट किया जा सकता है:

 var secondItem = $.create("div","item2"); 

क्या यह गंभीर है? नहीं। लेकिन यह वाक्यविन्यास $ ("<div> </ div>") से बेहतर है , और यह उस पैसे के लिए बहुत अच्छा मूल्य है।

मैं एक नया jQuery उपयोगकर्ता हूं, जो DOMAssistant से स्विच कर रहा है, जिसमें एक समान कार्य है: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

मेरा प्लगइन सरल है, मुझे लगता है कि एंटर्स और कंटेंट बेहतर तरीके से जोड़ने के तरीके को जोड़ना बेहतर है:

 $("#container").append( $.create("div").addClass("box").html("Hello, world!") ); 

इसके अलावा, यह एक सरल jQuery- प्लगइन (100 वें एक) के लिए एक अच्छा उदाहरण है।

ऐसा लगता है कि तत्व सृजन केवल आपको अभी तक मिलेगा। एक बार जब आप शृंखला शुरू करते हैं, तो प्रदर्शन अंतर नगण्य है।

http://jsperf.com/jquery-dom-node-creation

क्या मैं कुछ भूल रहा हूँ?

बॉक्स के बाहर jQuery में एक बनाएँइलेमेंट के बराबर नहीं है। वास्तव में jQuery के काम का बहुमत आंतरिक एचआईएल ओवर शुद्ध डोम हेरफेर का उपयोग करके आंतरिक रूप से किया जाता है। जैसा कि एडम ऊपर उल्लेख किया है कि आप इसी तरह के परिणाम कैसे प्राप्त कर सकते हैं

इसमें प्लगइन्स भी उपलब्ध हैं जो कि एओपीएंडएमओएम , डोमेक और फ्लाईडोम जैसी आंतरिक एचटीएमएल पर डोम का इस्तेमाल करते हैं, कुछ ही नामों के लिए। निष्पादन के आधार पर मूल jquery अभी भी सबसे अधिक प्रदर्शनकारी है (मुख्यतः क्योंकि यह आंतरिक एचटीएमएल का उपयोग करता है)