Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If you are unfamiliar with MVC, it is just a design paradigm for user interfaces. The creation of a program’s user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.
View $el is also the representation of the view’s element but it is a cached jQuery object. This also contains the element but with jQuery functions enabled. Because this $el maintains a reference to your element, you won’t have to search across the DOM each time you use it. With the advantages to the performance that this suggests.
Syntax:
view.$el
Example 1: The code below shows how we can manipulate HTML content using the $el property.
HTML
<!DOCTYPE html> <html>   <head>     <title>Backbone.js $el View</title>         type="text/javascript">     </script>     <script src=         type="text/javascript">     </script>     <script src=         type="text/javascript">     </script> </head>   <body>     <h1 style="color: green;">         neveropen     </h1>       <h3>Backbone.js $el View</h3>       <div id="content"></div>       <script type="text/javascript">         var Demo = Backbone.View.extend({             el: '#content',             initialize: function () {                 this.render();             },             render: function () {                 this.$el.html("Hello Geek!! Welcome "                     + "to neveropen. This is a "                     + "demo of the $el in view.");             }         });         var myview = new Demo();      </script> </body>   </html> |
Output:
Â
Example 2: The code below demonstrates the non-usage and usage of the properties tagName, className, and id as span, el-element, and element.
HTML
<!DOCTYPE html> <html>   <head>     <title>Backbone.js $el View</title>         type="text/javascript">     </script>     <script src=         type="text/javascript">     </script>     <script src=         type="text/javascript">     </script> </head>   <body>     <h1 style="color: green;">         neveropen     </h1>       <h3>Backbone.js $el View</h3>       <script type="text/javascript">          var Demo_1 = Backbone.View.extend({             initialize:function(){                  this.render();             },             render:function(){                 console.log(this.$el)             },         });         var Demo_2 = Backbone.View.extend({             tagName: 'span',             className: 'el-element',             id: 'element',             initialize:function(){                  this.render();             },             render:function(){                 console.log(this.$el)             },         });         var myview_1 = new Demo_1();          var myview_2 = new Demo_2();      </script>  </body>   </html> |
Output:
Â
Reference: https://backbonejs.org/#View-$elÂ
