For the given example, what is the difference between this.el & this.$el

I understand that this.$el points to the jQuery object of this.el , which in this case is 'li'.

When I render a view, I can choose between this.el, or this.$el. How am I able to render something to a page when I reference the jQuery object? I can see how using this.$el.html(property), points to the html, but why appending this.$el and having it render is what confuses me.

var Person = Backbone.Model.extend({
    defaults: {
        name: 'John Doe',
        age: 30,
        occupation: 'worker'
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'li',

    initialize: function() {
        this.render();
    },

    render: function() {
        var out = this.$el.html(this.model.get('name') + this.model.get('occupation'));
        console.log(this, this.el, this.$el, out);
        $('body').append(this.$el);
    },

});

var person = new Person;
var personview = new PersonView({model: person});

For the given example, what is the difference between this.el & this.$el

I understand that this.$el points to the jQuery object of this.el , which in this case is 'li'.

When I render a view, I can choose between this.el, or this.$el. How am I able to render something to a page when I reference the jQuery object? I can see how using this.$el.html(property), points to the html, but why appending this.$el and having it render is what confuses me.

var Person = Backbone.Model.extend({
    defaults: {
        name: 'John Doe',
        age: 30,
        occupation: 'worker'
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'li',

    initialize: function() {
        this.render();
    },

    render: function() {
        var out = this.$el.html(this.model.get('name') + this.model.get('occupation'));
        console.log(this, this.el, this.$el, out);
        $('body').append(this.$el);
    },

});

var person = new Person;
var personview = new PersonView({model: person});

• javascript
• jquery
• backbone.js

• 1 If you need jQuery methods or the cross browser support it brings, use this.$el, otherwise use the native DOM methods with this.el – Bojangles Commented Mar 10, 2014 at 15:19
• 1 Possible duplicate of What's the difference between: $(this.el).html and this.$el.html – pd12 Commented Jan 19, 2016 at 1:58

1 Answer 1

Bojangles is correct.

this.$el is a reference to the element in the context of jQuery, typically for use with things like .html() or .addClass(), etc. For example, if you had a div with id someDiv, and you set it to the el property of the Backbone view, the following statements are identical:

this.$el.html() $("#someDiv").html() $(this.el).html()

this.el is the native DOM element, untouched by jQuery.