Question

I am trying to output some h1 text on the page using backbone view but for some reason it is not working. I can show the h1 if i use it within document ready but not when I use it within the render function.

var HomeView = Backbone.View.extend({
  el:'body',
  intialize: function () {
    this.render();
    },
  render: function () {
    this.$el.empty();
    this.$el.append("<h1>My first Backbone app</h1>"); // not showing on the page
    return this;
    }
})
$(document).ready(function () {
  wineApp = new HomeView();
})

Answer 1

this.el is a DOM element while this.$el is a jQuery object. jQuery objects have an append function which is not available for plain DOM elements.

You can also convert the DOM element into a jQuery object by running $(this.el).

---

It’s a typo: the function intialize should be called in i tialize. At the moment the function isn’t invoked at all.