Q:

Can't insert content after specific division. Backbone.js

Here is what I've got:
ProductListView.js
define(['jquery', 'underscore', 'backbone', 'views/ProductView', 'views/PaginatorView'], function($, _, Backbone, ProductView, PaginatorView) {
    var ProductListView = Backbone.View.extend({
        className: 'productsList',
        initialize: function() {
            this.render();
        },
        render: function() {
            // some initialization
            // that's for zurb grid                
            this.$el.addClass('twelve columns');

            for(var i = startPos; i < endPos; i++) {
                this.$el.append(new ProductView({ model: products[i] }).render().el);
            }

            this.$el.append(new PaginatorView({ model: this.model, page: this.options.page }).render().el);
            // this.$el.after(new PaginatorView({ model: this.model, page: this.options.page }).render().el);
            return this;
        }
    });
    return ProductListView;
});

It seems that I can't insert something after this.$el. The line 
this.$el.after(new PaginatorView({ model: this.model, page: this.options.page }).render().el);

While it possible to append the PaginatorView inside the (ProductListView) view it seems to be impossible to insert something outside it.
Have you encountered something like that?

A:

this.$el.after will fail because when render() is called, this.$el has not yet been inserted in the DOM (it's just a dangling div).
Backbone encourages you to wait until the HTML content of your view is ready before inserting it. This way, the browser only repaints the window once and performance is much better.
As a rule of thumb, you should only manipulate content that resides inside this.$el in a Backbone view.

