2

I am trying to add new Elements in an HTML page body by using document.createElement via Javascript, I am doing this with few if/else case and function callings. All is working fine.
Recently I came to know that I can do this with JQuery, too. I have not done too much of coding yet so I was wondering which way is the best in terms of efficiency ? Using native DOM methods or using JQuery to add elements dynamically on the page?

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
Nagri
  • 3,008
  • 5
  • 34
  • 63
  • 3
    I think that jQuery uses the DOM internally, so you'd gain something in terms of cross-browser compatibility but plain javascript should always be faster – Matteo Tassinari Nov 20 '12 at 10:51
  • Sure native javascript will be faster , check : http://viget.com/inspire/jquery-or-native-method-everyday-techniques-no-3 , http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery – Mahmoud Farahat Nov 20 '12 at 10:57
  • short: DOM... jQuery USES the DOM tree and is just an add. layer – Daij-Djan Nov 20 '12 at 10:57
  • jQuery vs JavaScript Performance Comparison: [Check this out](http://jsperf.com/jquery-vs-javascript-performance-comparison/7) – palaѕн Nov 20 '12 at 10:59

1 Answers1

5

Using native JavaScript should be faster, because that's what jQuery will use underneath all the padding.

What jQuery gives you is abstraction from the browser. Who's to say that one browser hasn't implemented document.createElement? Then you have to write a lot of if-then-else code for your DOM manipulation.

jQuery comes at an efficiency price, but saves a lot of heartache and provides a lot of utility than writing your own native JS.

EMMERICH
  • 3,424
  • 2
  • 18
  • 14
  • 1
    in short `HTML DOM` will be efficient than `JQuery` right ? – Nagri Nov 20 '12 at 10:53
  • 2
    Disclaimer: browsers are fast enough now that, unless you're doing a LOT of DOM manipulation, the loss of efficiency can be measured in tenths of a second or less. Avoid Premature Optimization. Write clean code now and worry about efficiency later. – Blazemonger Nov 20 '12 at 10:54
  • `HTML DOM` is more efficient than `jQuery` as `jQuery` actively uses `DOM` manipulation functions. However, `jQuery` has the advantage of dealing with each browser's quirks for you. – Sébastien Renauld Nov 20 '12 at 10:54
  • 2
    +1. It's worth adding that jQuery is ridiculously well written, so for most operations it will outperform code you write yourself anyway, once you start adding checks for browser compatibility etc. – Kelvin Nov 20 '12 at 10:55
  • +1 Blazemonger. The different is so small now that it's more sensible to use jQuery (or some other DOM manipulation library) in most projects. – EMMERICH Nov 20 '12 at 10:55