إنشاء عناصر DOM باستخدام jQuery

في إطار رغبتك في تحسين كود JavaScript الخاص بك، أنت مهتم بالاستفادة من وظائف jQuery لتبسيط معالجة DOM .

يقدم jQuery طرقًا بديلة لإنشاء عناصر DOM، كما لاحظت مع $.create("div"). ومع ذلك، هذا الأسلوب ليس جزءًا من واجهة برمجة التطبيقات الأساسية لـ jQuery وقد لا يكون موثوقًا به دائمًا.

للحصول على حل أكثر كفاءة وتوحيدًا، ضع في اعتبارك ما يلي:

this.$OuterDiv = $(' ') .يخفي() .append($('') .attr({ تباعد الخلايا : 0 }) .addClass("نص") ) ;

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

يؤدي هذا الكود المختصر نفس أداء JavaScript الأصلي من خلال:

إنشاء عنصر
باستخدام $('

).

إخفائه باستخدام .hide().

إلحاق عنصر باستخدام $.append()، الإعداد خصائصه وإضافة فئة.

نتائج المقارنة

فيما يتعلق بأداء طرق إنشاء العناصر المختلفة، كشف الاختبار أن document.createElement هو الأسرع. ومع ذلك، فإن فروق التوقيت بين الطرق تكون ضئيلة في الإصدارات الحديثة من jQuery (على سبيل المثال، 3 مللي ثانية لكل ألف عنصر).

تم التحديث لـ jQuery 1.7.2

تم تحديث المعيار باستخدام jQuery 1.7.2 وهو متاح على http://jsben.ch/#/ARUtz لمزيد من الاستكشاف والتعهيد الجماعي نتائج.