jQuery का दस्तावेज़।

1251

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

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

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

— रोब स्टीवेन्सन-लेगेट
स्रोत

jsben.ch/#/ARUtz - jquery बनाम createElement के लिए एक बेंचमार्क

— एस्केपनेटस्केप

JQuery में एक div एलिमेंट बनाने

— T.Todua

बिना पढ़ा हुआ टाइपरोर: $ .create एक फंक्शन नहीं है

— Tyguy7

1290

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

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 मिलीसेकंड के बराबर है ।

अपडेट २

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

http://jsben.ch/#/ARUtz

— nickf
स्रोत

70

आपको पता चलेगा कि j.cn को अपने html स्ट्रिंग को एक तत्व में बदलने की तुलना में document.createElement बहुत तेज है। (बस अगर आपके पास चीजों को और अधिक कुशल बनाने का आग्रह है)

— सुगनेंद्रन 0

25

यह jQuery के लिए सच है <1.3 यह गति के बराबर है अब मैं निष्क्रिय हूं।

— रोब स्टीवेन्सन-लेगेट

15

@ केविन, यह सच है, हालांकि यह jQuery को अधिक काम करता है (यह समापन टैग जोड़ने के लिए एक रेगेक्स के माध्यम से चलाता है), इसलिए मैं ऊपर की विधि पसंद करता हूं। इसके अलावा, यह आपके कोड को अलग $('div')करता है जिसमें से नेत्रहीन बहुत समान है, लेकिन कार्यात्मक रूप से अलग-अलग डंडे हैं।

— nickf

14

तो मूल रूप से @Sungendran & @nickf का संयोजन होगा $(document.createElement('div'))और यह सबसे तेज़ होना चाहिए?

— कोल्की

14

मुझे लगता है कि "सही" तरीका $ ('<div />') है, IMO के साथ और भी "अर्थ" है, क्योंकि यह बहुत स्पष्ट है कि आप एक नोड बना रहे हैं। बुरी बात यह है कि सभी संपादकों में हाइलाइटिंग सिंटैक्स को तोड़ता है = (

— एरिक एस्कोबाडो

139

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

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

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

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

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

— एडम बेलेयर
स्रोत

7

शायद यह स्पष्ट था, और आपके उदाहरण से संकेत मिलता है, लेकिन $ ("<html string>") सिंटैक्स का उपयोग करके एक jQuery DOM तत्व बनाते हुए, मूल <तत्व> .appendChild विधि या समान का उपयोग करके DOM में जोड़ा नहीं जा सकता है। आपको jQuery एपेंड पद्धति का उपयोग करना चाहिए।

— एडम

4

$(htmlStr)के रूप में कार्यान्वित किया जाता है document.createElement("div").innerHTML = htmlStr। दूसरे शब्दों में, यह ब्राउज़र के HTML पार्सर को आमंत्रित करता है। विकृत HTML IE बनाम अन्य ब्राउज़रों में अलग तरह से टूटता है।

— मैथ्यू

2

@Adam jQuery ऑब्जेक्ट में वह getफ़ंक्शन होता है जो मूल DOM तत्व देता है। (मुझे पता है कि यह विषय पुराना है, लेकिन मैं इसे संदर्भ के लिए जोड़ता हूं; ;-))

— कांस्टेंटिनो त्सारोहास

1

यदि आप html स्ट्रिंग के साथ समस्याएँ हैं, तो इसे jQuery.parseHTML के

— fguillen

1

@ अदम या, यदि आपके कोड फ्लो / आंखों पर यह आसान है, तो आप कर सकते हैं[dom element].appendChild($('<html>')[0]);

— ACK_stoverflow

67

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

http://api.jquery.com/jQuery/#creating-new-elements
और पार्टिसिलरी http://api.jquery.com/jQuery/#example-1-1

— abernier
स्रोत

17

डॉक्टर को जोड़ने के लिए धन्यवाद! $('<a>')असहनीय है!

— कर्नल पैनिक

49

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

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

— कामी
स्रोत

44

चूंकि 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 []

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

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

— ब्रायन
स्रोत

"बेहतर विकल्प" "किसी भी] तत्व को बनाने के लिए" मजबूत हो सकता है। @ siergiej का उत्तर यह कहने parseHTMLका एक अच्छा काम करता है कि HTML बाहरी स्रोतों से आ रहा है, लेकिन यह " नया jQuery ऑब्जेक्ट में परिणाम लपेटने के बाद सभी बूस्ट चला गया " है। यही है, यदि आप नए jQuery के लिपटे HTML तत्व के निर्माण को हार्ड-कोड करना चाहते हैं, तो $("<div>stuff</div>")शैली अभी भी जीतती दिख रही है।

— रफिन

38

अपडेट करें

JQuery के नवीनतम संस्करणों के अनुसार, निम्न विधि दूसरी वस्तु में पारित गुण प्रदान नहीं करती है

पिछला उत्तर

मुझे लगता है कि document.createElement('div')एक साथ उपयोग करना jQueryतेज है:

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

— ओम शंकर
स्रोत

29

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

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

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

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

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

जो दुर्भाग्य से सिर्फ उपयोग करने की तुलना में कम सुविधाजनक है $(), लेकिन यह आपको अधिक नियंत्रण प्रदान करता है, उदाहरण के लिए आप स्क्रिप्ट टैग को बाहर करना चुन सकते हैं ( 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

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

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

— siergiej
स्रोत

11

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

— शिमोन डूडकिन
स्रोत

6

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

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

— AcidicChip
स्रोत

5

मैंने अभी इसके लिए एक छोटा 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 वें एक) के लिए एक अच्छा उदाहरण है।

— ern0
स्रोत

4

यह सब बहुत सीधे आगे है! एक जोड़े को त्वरित उदाहरण ...

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 );

— भिखारिन
स्रोत

1

पिछले उत्तरों में उल्लेख नहीं किया गया है, इसलिए मैं कार्यशील उदाहरण जोड़ रहा हूं कि नवीनतम jQuery के साथ तत्व तत्वों को कैसे बनाया जाए, साथ ही सामग्री, वर्ग या ऑनक्लिक कॉलबैक जैसी अतिरिक्त विशेषताओं के साथ:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

स्निपेट का विस्तार करें

— व्लादिस्लाव लाडकी
स्रोत

-2

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

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

— जेम्स ह्यूजेस
स्रोत

5

आपको डेट करना चाहिए। jQuery इनरएचटीएमएल का उपयोग नहीं करता है लेकिन HTML स्ट्रिंग को पार्स करता है और आंतरिक रूप से document.createElement () का उपयोग करके डोम ट्री बनाता है। यह कोर jQuery है।

— विंसेंट रॉबर्ट