JQuery के साथ एक नया तत्व बनाने का पसंदीदा तरीका

227

मुझे 2 तरीके मिले हैं जिनका मैं <div>उपयोग कर सकता हूं jQuery।

कोई एक:

var div = $("<div></div>");
$("#box").append(div);

या:

$("#box").append("<div></div>");

पुन: प्रयोज्य के अलावा दूसरे तरीके का उपयोग करने की क्या कमियां हैं?

— अश्विन
स्रोत

8

यह पुन: प्रयोज्य की बात है। तुम्हारा कॉल।

— रोको सी। बुलजन

पुन: प्रयोज्यता से @gdoron मेरा मतलब है: यदि आपके पास एक चर के अंदर एक तत्व है, तो आप उस संस्करण को फिर से कॉल कर सकते हैं जहाँ आपको ज़रूरत है, जैसे आपके उदाहरण में।

— रोको सी। बुल्जन

2

क्यों .html, लेकिन .appendदूसरे मामले में नहीं ?

— इंजीनियर

@Engineer - क्षमा करें, यहाँ गलती थी। मैंने उसे ठीक किया।

— अश्विन

मैंने सोचा था कि गति निष्पादन के मामले में उत्तरार्द्ध विधि तेज थी, लेकिन पहले वाला लगता है (10% ~ 40%) तेज: jsperf.com/jquery-append-string-vs-append-jquery-reference

— Calderan

339

पहला विकल्प आपको अधिक फ्लेक्सिबिलिटी देता है:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

और निश्चित रूप .html('*')से सामग्री पर हावी .append('*')नहीं है, लेकिन मुझे लगता है, यह आपका सवाल नहीं था।

एक और अच्छा अभ्यास आपके jQuery चर के साथ उपसर्ग कर रहा है $: क्या jQuery में चर के साथ
$ का उपयोग करने के पीछे कोई विशेष कारण है

"class"संपत्ति के नाम के आसपास उद्धरण रखने से यह कम लचीले ब्राउज़रों के साथ अधिक संगत हो जाएगा।

— gdoron मोनिका का समर्थन कर रहा है
स्रोत

10

इसके अलावा $, मेरी राय में एक " " के साथ jQuery के संग्रह नाम शुरू करने के लिए एक अच्छा अभ्यास । सिर्फ यह देखते हुए कि आपने जो किया है, उसकी आवश्यकता नहीं है $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— धमाका गोलियां

क्या उन डॉलर के संकेत आवश्यक हैं या एक टाइपो? $div। मैंने पहले उस वाक्य रचना को नहीं देखा है, लेकिन मैं Jquery में नया हूं।

— felwithe 15

मैं हमेशा $ का उपयोग करता हूं चर एक jquery वस्तु है, $ _ अगर यह एक jQuery संग्रह है, और _var यदि यह एक काउंटर है। नियमित चर के लिए संस्करण।

— केसी

1

तत्व बनाने के इस तरीके के लिए प्रलेखन कहां है? $("<div>", {id: "foo", class: "a"});। मैं जानना चाहता हूं कि क्या इसके लिए अन्य विकल्प हैं

— सबा आहंग

@gdoron कृपया, मेरे प्रश्न पर एक नज़र डालें stackoverflow.com/questions/35413044/…

— विक्स

74

मैं व्यक्तिगत रूप से सोचता हूं कि कोड को पठनीय की तुलना में पठनीय और संपादन योग्य होना अधिक महत्वपूर्ण है। जो भी आपको देखने में आसान लगे और यह वह होना चाहिए जो आप उपरोक्त कारकों के लिए चुनते हैं। आप इसे इस प्रकार लिख सकते हैं:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

और आपकी पहली विधि इस प्रकार है:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

लेकिन जहाँ तक पठनीयता जाती है; jQuery का दृष्टिकोण मेरा पसंदीदा है । इस मददगार jQuery के ट्रिक्स, नोट्स और बेस्ट प्रैक्टिस को फॉलो करें

— निरंजन सिंह
स्रोत

नए HTML तत्वों को बनाने पर jQuery संदर्भ के लिए उस लिंक के लिए धन्यवाद । तो उसके लिए google पर मेहनत करो।

— बॉब स्टीन

बेहतर है कि इसे

— लाइक करें

25

बहुत अधिक अभिव्यंजक तरीका,

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

संदर्भ: डॉक्स

— दर्शन
स्रोत

4

classडॉक्स (ऊपर दिए गए लिंक के माध्यम से) के अनुसार, उद्धरण में होना चाहिए: "नाम" वर्ग "को ऑब्जेक्ट में उद्धृत किया जाना चाहिए क्योंकि यह जावास्क्रिप्ट आरक्षित शब्द है, और" क्लासनेम "का उपयोग नहीं किया जा सकता क्योंकि यह DOM प्रॉपर्टी को संदर्भित करता है , विशेषता नहीं। "

— आइजैक ग्रेगसन

5

JQuery के आधिकारिक दस्तावेज के अनुसार

एक HTML तत्व बनाने के लिए, $("<div/>")या $("<div></div>")पसंद किया जाता है।

तो फिर तुम उपयोग कर सकते हैं appendTo, append, before, afterऔर आदि ,. DOM में नया एलिमेंट डालने के लिए।

पुनश्च: jQuery संस्करण 1.11.x

— एलन डोंग
स्रोत

2

3.4 के लिए प्रलेखन के अनुसार , attr()विधि के साथ विशेषताओं का उपयोग करना पसंद किया जाता है।

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

— अनुराधा मुदलगे
स्रोत

मैंने उद्धरण जोड़े। यदि आप classउद्धरण में नहीं डालते हैं , तो यह चुपचाप विफल हो जाएगा और इसके परिणामस्वरूप पागलपन हो सकता है।

— जॉन हेनकेल

0

मैं पहले विकल्प की सिफारिश करूंगा, जहां आप वास्तव में jQuery का उपयोग करके तत्वों का निर्माण करते हैं। दूसरा दृष्टिकोण बस तत्व के इनर HTML प्रॉपर्टी को एक स्ट्रिंग पर सेट करता है, जो HTML के रूप में होता है, और अधिक त्रुटि प्रवण और कम लचीला होता है।

— jbabey
स्रोत

1

@ दूसरे दृष्टिकोण के साथ, आप गलती से आपके द्वारा संशोधित कंटेनर के अन्य सभी बच्चों को मिटा सकते हैं: jsfiddle.net/jbabey/RBXq5/1

— jbabey

0

अगर #boxखाली है, कुछ भी नहीं है, लेकिन अगर यह ये बहुत अलग चीजें नहीं हैं। पूर्व divके अंतिम बच्चे के नोड के रूप में जोड़ देगा #box। उत्तरार्द्ध पूरी तरह से #boxएक खाली div, पाठ और सभी की सामग्री को बदल देता है ।

— विस्फोट गोलियां
स्रोत

ओह .. मेरा मतलब यहाँ एपेंड का इस्तेमाल नहीं करना है;)

— अश्विन

0

निम्नलिखित तरीके से एक दिव्य तत्व बनाना भी संभव है:

var my_div = document.createElement('div');

वर्ग जोड़ें

my_div.classList.add('col-10');

भी प्रदर्शन कर सकते हैं append()औरappendChild()

— nabila_ahmed
स्रोत