javascript - jQuery दस्तावेज़.createElement समकक्ष?




html dom (9)

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

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

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

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

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

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


चूंकि jQuery1.8 , तत्व बनाने के लिए jQuery.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>​]

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

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

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

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

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


बॉक्स के बाहर jQuery को createElement के बराबर नहीं है। असल में jQuery के अधिकांश काम आंतरिक डीओएम मैनिपुलेशन पर आंतरिक HTML का उपयोग करके आंतरिक रूप से किया जाता है। जैसा कि ऊपर वर्णित एडम है, आप इसी तरह के परिणाम कैसे प्राप्त कर सकते हैं।

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


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

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

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

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

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

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

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

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

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

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

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

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


यहां "एक" पंक्ति में आपका उदाहरण है।

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 पर बेंचमार्क डाला जो संभवतः मेरे आदिम मानक से थोड़ा अधिक वैज्ञानिक है, और इसके साथ ही यह भीड़ हो सकता है!

jsben.ch/#/ARUtz


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

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

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

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

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

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

> $.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

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

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


var mydiv = $('<div />') // also works




dhtml