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 এ একটি

— ডিভ

আনকড টাইপ এরির: c। ক্রিয়েট কোনও ফাংশন নয়

— টাইগুই 7

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 মিলিসেকেন্ডের সমান ।

আপডেট 2

JQuery 1.7.2 এর জন্য আপডেট হয়েছে এবং সেই মানদণ্ডটিJSBen.ch রেখেছি যার উপরে সম্ভবত আমার আদিম মানদণ্ডের চেয়ে কিছুটা বেশি বৈজ্ঞানিক, তবুও এটি এখন জনসমাগম হতে পারে!

http://jsben.ch/#/ARUtz

— nickf
সূত্র

70

আপনি দেখতে পাবেন যে ডকুমেন্ট.ক্রেটএলমেন্টটি আপনার এইচটিএমএল স্ট্রিংটিকে একটি উপাদান হিসাবে রূপান্তরিত করার চেয়ে বেশি দ্রুত। (কেবলমাত্র যদি বিষয়গুলিকে আরও দক্ষ করার জন্য আপনার

— আগ্রহ থাকে

25

এটি jQuery এর জন্য সত্য <1.3 গতির সমতুল্য এখন আমি মেনে চলি।

— রব স্টিভেনসন-লেগেট

15

কেভিন, এটি সত্য, তবে এটি jQuery আরও কাজ করতে সক্ষম করে (এটি এটি ক্লোজিং ট্যাগ যুক্ত করার জন্য একটি রেজেক্সের মাধ্যমে চালায়), সুতরাং আমি উপরের পদ্ধতিটি পছন্দ করি। এছাড়াও, এটি আপনার $('div')কোডকে পৃথক করে যা থেকে দৃশ্যত খুব অনুরূপ, তবে কার্যত পৃথকভাবে খুঁটি রয়েছে।

— নিকফ

14

সুতরাং মূলত @ সুনগ্রেনড্রেন এবং @ নিকফের সংমিশ্রণটি হবে $(document.createElement('div'))এবং এটি সবচেয়ে দ্রুত হওয়া উচিত?

— কলকি

14

আমি মনে করি "সঠিক" উপায়টি হ'ল $ ('<div />'), আইএমও সহ আরও "অর্থ" রয়েছে, কারণ এটি আপনি স্পষ্টভাবে নোড তৈরি করছেন। খারাপ জিনিসটি এইভাবে সমস্ত সম্পাদকগুলিতে হাইলাইট করে সিনট্যাক্সটি ভেঙে দেয় = (

— এরিক এসকোবেডো

139

আপনি যে jQuery কনস্ট্রাক্টরের সাথে যুক্ত করতে চান এমন উপাদানগুলির এইচটিএমএল সরবরাহ করার $()ফলে সদ্য নির্মিত বিলম্বিত এইচটিএমএল থেকে jQuery অবজেক্ট ফেরত আসবে, jQuery এর append()পদ্ধতিটি ব্যবহার করে DOM এ যুক্ত হওয়ার উপযুক্ত ।

উদাহরণ স্বরূপ:

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

আপনি যদি চান তবে এই টেবিলটিকে প্রোগ্রামগতভাবে পপুলেশন করতে পারেন।

এটি আপনাকে শ্রেণীর নাম বা অন্যান্য বৈশিষ্ট্য সহ আপনার পছন্দসই যেকোন সুনির্দিষ্ট HTML নির্দিষ্ট করার সক্ষমতা দেয় যা আপনি জেএস এর createElementমতো cellSpacingএবং এর classNameমাধ্যমে বৈশিষ্ট্যগুলি ব্যবহার এবং তারপরে আরও সংক্ষিপ্ত খুঁজে পেতে পারেন ।

— অ্যাডাম বেলার
সূত্র

7

হতে পারে এটি সুস্পষ্ট ছিল এবং এটি আপনার উদাহরণ দ্বারা নির্দেশিত হয়েছে, তবে but ("<html স্ট্রিং>") সিনট্যাক্স ব্যবহার করে একটি jQuery DOM উপাদান তৈরি করা, স্থানীয় <এলিমেন্ট>। অ্যাপেন্ডচিল্ড পদ্ধতি বা অনুরূপ ব্যবহার করে ডিওমে যুক্ত করা যাবে না। আপনাকে অবশ্যই jQuery সংযোজন পদ্ধতিটি ব্যবহার করতে হবে।

— আদম

4

$(htmlStr)হিসাবে বাস্তবায়ন করা হয় document.createElement("div").innerHTML = htmlStr। অন্য কথায়, এটি ব্রাউজারের এইচটিএমএল পার্সারকে আহ্বান করে। আইএম বনাম অন্যান্য ব্রাউজারগুলিতে ত্রুটিযুক্ত এইচটিএমএল আলাদাভাবে ভেঙে যায়।

— ম্যাথু

2

@ অ্যাডাম jQuery অবজেক্টে getফাংশন রয়েছে যা দেশীয় DOM উপাদানটি দেয়। (আমি জানি এই বিষয়টি পুরানো, তবে আমি এটি রেফারেন্সের জন্য যুক্ত করেছি; ;-))

— কনস্টান্টিনো জারোহাস

1

যদি আপনার এইচটিএমএল স্ট্রিংয়ের সমস্যা হয় তবে এটি jQuery.parseHTML

— ফাগিলেন

1

@ অ্যাডাম বা, যদি আপনার কোড প্রবাহ / চোখের উপরে এটি আরও সহজ হয় তবে আপনি এটি করতে পারেন[dom element].appendChild($('<html>')[0]);

— ACK_stoverflow

67

নতুন ডিওএম উপাদান তৈরি করা jQuery()পদ্ধতির মূল বৈশিষ্ট্য , দেখুন:

— abernier
সূত্র

17

ডক লিঙ্ক করার জন্য ধন্যবাদ! $('<a>')অস্পষ্ট!

— কর্নেল আতঙ্ক

49

আমি এরকম করছি:

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

— Kami
সূত্র

44

যেহেতু jQuery1.8, $.parseHTML()উপাদান তৈরি করতে ব্যবহার করা আরও ভাল পছন্দ।

দুটি সুবিধা রয়েছে:

1. আপনি যদি পুরানো উপায়টি ব্যবহার করেন, যা এমন কিছু হতে পারে $(string)তবে আপনি এইচটিএমএল ট্যাগ নির্বাচন করতে চান বা কোনও নতুন উপাদান তৈরি করতে চান তা নিশ্চিত করার জন্য jQuery স্ট্রিংটি পরীক্ষা করবে। ব্যবহার করে $.parseHTML(), আপনি jQuery কে বলেছিলেন যে আপনি একটি নতুন উপাদান স্পষ্টভাবে তৈরি করতে চান, তাই পারফরম্যান্সটি আরও ভাল হতে পারে।

২. আরও অনেক গুরুত্বপূর্ণ বিষয় হ'ল আপনি যদি পুরানো পথটি ব্যবহার করেন তবে ক্রস সাইট আক্রমণ ( আরও তথ্য ) থেকে ভুগতে পারেন। যদি আপনার মতো কিছু থাকে:

    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:

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

— ব্রায়ান
সূত্র

"[কোনও] উপাদান তৈরি করতে" "" আরও ভাল পছন্দ "শক্তিশালী হতে পারে। @ সিয়েরগিজের উত্তরটিparseHTML বাইরের উত্স থেকে আসা এইচটিএমএলের পক্ষে বলা ভাল কাজ , তবে " নতুন জিকুয়েরি অবজেক্টে ফলাফল মোড়ানোর পরে সমস্ত উত্সাহ বৃদ্ধি পেয়েছে "। এটি হ'ল যদি আপনি হার্ড-কোড করতে চান তবে একটি নতুন জিকুয়ারি-মোড়ানো এইচটিএমএল উপাদান তৈরি $("<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 code goes here)'), উদাহরণস্বরূপ অফিসিয়াল জিকুয়ের ওয়েবসাইটটি তাদের রিলিজ নোটগুলির মধ্যে একটিতে নীচে উল্লেখ করেছে :

রিলাক্সড এইচটিএমএল পার্সিং: আপনার আবার $ (এইচটিএমএল স্ট্রিং) এ ট্যাগ করার আগে শীর্ষস্থান বা নতুন লাইন থাকতে পারে। আমরা এখনও দৃ strongly়ভাবে পরামর্শ দিচ্ছি যে আপনি বাহ্যিক উত্স থেকে প্রাপ্ত HTML কে পার্স করার সময় আপনি p .parseH HTML () ব্যবহার করুন এবং ভবিষ্যতে 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

  p পার্সএইচটিএমএল: 88 মিমি
  $ ($। পার্সএইচটিএমএল): 240 মিমি
  <div> </div>: 138 মিমি
  <ডিভ>> 143 মিমি
  createElement: 64ms

দেখে মনে হচ্ছে parseHTMLঅনেক কাছাকাছি createElementতুলনায় $(), কিন্তু সমস্ত বুস্ট একটি নতুন jQuery এর অবজেক্ট ফলাফল মোড়কে সব চেষ্টাই ব্যর্থ হল

— siergiej
সূত্র

11

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

— শিমন ডুডকিন
সূত্র

6

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

JQuery এ একটি ডিআইভি উপাদান তৈরি করার সবচেয়ে সংক্ষিপ্ত / সহজতম উপায়।

— AcidicChip
সূত্র

5

আমি তার জন্য একটি ছোট jQuery প্লাগইন তৈরি করেছি: https://github.com/ern0/jquery.create

এটি আপনার বাক্য গঠনটি অনুসরণ করে:

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

ডোম নোড আইডি দ্বিতীয় প্যারামিটার হিসাবে নির্দিষ্ট করা যেতে পারে:

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

এটা কি গুরুতর? না। তবে এই বাক্য গঠনটি $ ("<ডিভি> </ ডিভি>") এর চেয়ে ভাল এবং এটি সেই অর্থের জন্য খুব ভাল মান।

আমি একটি নতুন জিকিউরি ব্যবহারকারী, ডিওএম্যাসিস্টিভের থেকে স্যুইচ করছি, যার অনুরূপ ফাংশন রয়েছে: http://www.domassressive.com/docamentation/DOMAsstivesContent-module.php

আমার প্লাগইনটি সহজ, আমি মনে করি শৃঙ্খলিত পদ্ধতিতে অ্যাটর্স এবং সামগ্রীগুলি যুক্ত করা আরও ভাল:

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

এছাড়াও, এটি একটি সরল jQuery- প্লাগইন (100 তম) এর জন্য একটি ভাল উদাহরণ।

— ern0
সূত্র

4

সব ঠিক সামনে এগিয়ে! Heres একটি দম্পতি দ্রুত উদাহরণ ...

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 কোনও ক্রাইলেমেন্টের সমতুল্য নয়। আসলে jQuery এর বেশিরভাগ কাজ অভ্যন্তরীণভাবে খাঁটি DOM ম্যানিপুলেশনের মাধ্যমে অভ্যন্তরীণ HTML ব্যবহার করে সম্পন্ন হয়। অ্যাডাম উপরে উল্লিখিত হিসাবে আপনি কিভাবে অনুরূপ ফলাফল অর্জন করতে পারেন।

এমন কয়েকটি প্লাগইন উপলব্ধ রয়েছে যা কেবলমাত্র কয়েকটি নাম দেওয়ার জন্য অ্যাপেন্ডডম , ডোমেক এবং ফ্লাইডোমের মতো ইনটারএইচটিএমএল এর মাধ্যমে ডোম ব্যবহার করে । পারফরম্যান্স অনুসারে নেটিভ জ্যাকোয়ারি এখনও সর্বাধিক পারফরম্যান্ট (মূলত এটি অভ্যন্তরীণ এইচটিএমএল ব্যবহার করে)

— জেমস হিউজেস
সূত্র

5

আপনার আপ টু ডেট হওয়া উচিত। jQuery অভ্যন্তরীণ HTML ব্যবহার করে না তবে এইচটিএমএল স্ট্রিংকে বিশ্লেষণ করে এবং ডকুমেন্ট.ক্রেটইলিমেন্ট () ব্যবহার করে অভ্যন্তরীণভাবে একটি ডম গাছ তৈরি করে। এটি মূল jQuery।

— ভিনসেন্ট রবার্ট