JQuery দিয়ে একটি নতুন উপাদান তৈরি করার পছন্দের উপায়

Question

আমি একটি <div>ব্যবহার তৈরি করতে পারে এমন 2 টি উপায় পেয়েছি jQuery।

উভয় ক্ষেত্রেই:

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

বা:

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

পুনরায় ব্যবহারযোগ্যতা ব্যতীত দ্বিতীয় উপায় ব্যবহারের ত্রুটিগুলি কী কী?

Comments

এটি কেবল পুনরায় ব্যবহারযোগ্যতার বিষয়। আপনার কল

— রোকো সি বুলজান

@ জিডোরন পুনঃব্যবহারযোগ্যতার দ্বারা আমি বোঝাতে চাইছি: আপনার যদি কোনও ভেরিয়েবলের অভ্যন্তরে কোনও উপাদান থাকে তবে আপনার উদাহরণের মতোই যেখানে যেখানে প্রয়োজন সেখানে ভারটি পুনরায় কল করতে পারেন।

— রোকো সি। বুলজান

কেন .html, তবে .append২ য় ক্ষেত্রে নয়?

— ইঞ্জিনিয়ার

@ ইঞ্জিনিয়ার - দুঃখিত, এখানে ভুল ছিল। আমি এটা সংশোধন করেছি।

— আশ্বিন

আমি ভেবেছিলাম যে গতি প্রয়োগের ক্ষেত্রে পরবর্তী পদ্ধতিটি দ্রুত ছিল তবে প্রথমটিটি

— ফ্যাব্রিজিও ক্যাল্ডেরান

Answer 1

প্রথম বিকল্পটি আপনাকে আরও নমনীয়তা দেয়:

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

এবং অবশ্যই .html('*')বিষয়বস্তুগুলিকে ওভাররাইড .append('*')করে না তবে আমার ধারণা, এটি আপনার প্রশ্ন ছিল না।

আর একটি ভাল অনুশীলন আপনার jQuery ভেরিয়েবলগুলির সাথে উপসর্গ করা হচ্ছে $: jQuery এর ভেরিয়েবল সহ
using ব্যবহারের পিছনে কোনও নির্দিষ্ট কারণ রয়েছে?

"class"সম্পত্তির নামের চারপাশে উদ্ধৃতি স্থাপন করা এটি কম নমনীয় ব্রাউজারগুলির সাথে আরও সুসংগত করে তুলবে।

Comments

$আমার মতে, " " দিয়ে jQuery সংগ্রহের নামগুলি শুরু করার জন্য একটি ভাল অনুশীলন । আপনি যেটি করেছেন তার দরকার নেই তা কেবল উল্লেখ করে $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— বিস্ফোরণ পিল

এই ডলার লক্ষণগুলি প্রয়োজনীয় বা টাইপো? $div। আমি এই সিনট্যাক্সটি আগে দেখিনি, তবে আমি জ্যাকুরিতে নতুন।

— fwwithe

আমি সর্বদা $ হ'ল ভেরিয়েবলটি একটি jquery অবজেক্ট, $ _ যদি এটি jQuery সংগ্রহ হয় এবং যদি এটি কোনও পাল্টা হয় তবে _var ব্যবহার করি। নিয়মিত ভেরিয়েবলের জন্য বিভিন্ন।

— কেসি 21

উপাদান তৈরির এই উপায়ে ডকুমেন্টেশন কোথায়? $("<div>", {id: "foo", class: "a"});। আমি এটির জন্য অন্য বিকল্পগুলি আছে কিনা তা জানতে চাই

— সাবা আহং

@gdoron দয়া, আমার প্রশ্ন কটাক্ষপাত করা stackoverflow.com/questions/35413044/...

— Vixed

Answer 2

আমি ব্যক্তিগতভাবে মনে করি যে পারফরম্যান্সের চেয়ে কোডটি পঠনযোগ্য এবং সম্পাদনাযোগ্য হওয়া আরও গুরুত্বপূর্ণ। যাকে আপনি দেখতে সহজ মনে করেন এবং উপরের বিষয়গুলির জন্য আপনি এটি বেছে নিতে পারেন। আপনি এটি লিখতে পারেন:

$('#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 কৌশল, নোট এবং সেরা অভ্যাস অনুসরণ করুন

Comments

নতুন এইচটিএমএল উপাদান তৈরি করার জন্য jQuery রেফারেন্সের সেই লিঙ্কটির জন্য ধন্যবাদ । এর জন্য গুগল করা খুব কঠিন।

— বব স্টেইন

এটি আরও ভাল করুন: স্ট্যাকওভারফ্লো.com

— 43719563

Answer 3

আরও অনেক অভিব্যক্তিপূর্ণ উপায়,

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

তথ্যসূত্র: ডকস

Comments

classডকস অনুসারে (উপরের ডক্স লিঙ্কের মাধ্যমে) উদ্ধৃতিগুলিতে হওয়া উচিত: "জাভাস্ক্রিপ্ট সংরক্ষিত শব্দ হওয়ায় বস্তুটিতে" শ্রেণি "নামটি উদ্ধৃত করা আবশ্যক এবং" ক্লাসের নাম "ব্যবহার করা যাবে না কারণ এটি ডিওএম বৈশিষ্ট্যটিকে বোঝায় , গুণটি নয় ""

— আইজ্যাক গ্রেগসন

Answer 4

মতে jQuery এর অফিসিয়াল ডকুমেন্টেশন

এইচটিএমএল উপাদান তৈরি করতে $("<div/>")বা $("<div></div>")পছন্দসই।

তারপর আপনি ব্যবহার করতে পারেন appendTo, append, before, afterএবং ইত্যাদি ,. নতুন উপাদানটি ডিওমে প্রবেশ করতে।

PS: jQuery সংস্করণ 1.11.x

Answer 5

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

Comments

আমি উদ্ধৃতি যোগ। আপনি যদি classউদ্ধৃতি না রাখেন , এটি নিঃশব্দে ব্যর্থ হবে এবং পাগলামির ফলাফল হতে পারে।

— জন হেন্কেল

Answer 6

আমি প্রথম বিকল্পটি সুপারিশ করব, যেখানে আপনি আসলে jQuery ব্যবহার করে উপাদান তৈরি করেন। দ্বিতীয় পদ্ধতির সাহায্যে উপাদানটির অভ্যন্তরীণ এইচটিএমএল সম্পত্তিটি কেবল স্ট্রিংয়ে সেট করা হয়, যা এইচটিএমএল হয় এবং এটি আরও ত্রুটিযুক্ত এবং কম নমনীয়।

Comments

@ দ্বিতীয় পদ্ধতির সাথে, আপনি যে কনটেইনারটি সংশোধন করছেন তার অন্য সমস্ত শিশুকে ভুল করে মুছে ফেলতে পারেন: jsfiddle.net/jbabey/RBXq5/1

— jbabey

Answer 7

যদি #boxখালি থাকে তবে কিছুই নয়, তবে এটি যদি না হয় তবে খুব আলাদা জিনিস এটি করে। প্রাক্তনটি divসর্বশেষ সন্তানের নোড হিসাবে যুক্ত করবে #box। পরেরটি সম্পূর্ণরূপে #boxএকক খালি div, পাঠ্য এবং সমস্ত বিষয়বস্তু প্রতিস্থাপন করে ।

Comments

ওহ .. আমি এখানে অ্যাপেন্ড ব্যবহার করতে চাইছি না;)

— আশ্বিন

Answer 8

নিম্নলিখিত উপায়ে একটি ডিভ উপাদান তৈরি করাও সম্ভব:

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

ক্লাস যুক্ত করুন

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

এছাড়াও সঞ্চালন করতে পারেন append()এবংappendChild()