OO Javascript - Should I let a class add itself to the DOM or let it return an element to then add to the DOM?

Question

I am practicing with OO Javascript, making a sort of web-app for viewing Manga (comics)

Right now I have a few classes:

• SearchResult
• Manga (generated from data out of the search result)
• Chapter (contained within Manga)
• Page (contained within Chapter)
• Image (contained within Page)

I add the search result to the DOM by generating the element's html and then appending this with jQuery.

This is where my question comes in:

Should I generate html (or a jQuery DOM element) and return this from a function in the class and then add this element outside the class or would it be wiser to give the class a reference to the container it should put elements in and let it put the elements into that container by appending?

So this?:

function(data, result, response) {
  var
    $resultContainer = $('<div/>', {class: 'row-fluid'}),
    maxResults = 10;

  for(var i in data) {
    if(i == maxResults) {
      break;
    }
    data[i].manga = Manga(data[i]);
    var res = new SearchResult(data[i]);
    res.setMyContainerElement($resultContainer);
    res.addResultToDOM();
  }
}

Or this?:

function(data, result, response) {
  var
    $resultContainer = $('<div/>', {class: 'row-fluid'}),
    maxResults = 10;

  for(var i in data) {
    if(i == maxResults) {
      break;
    }
    data[i].manga = Manga(data[i]);
    var res = new SearchResult(data[i]);
    $resultContainer.append(res.getHTML());
  }
}

In these examples the variable "data" is data from an AJAX call that returns a JSON-string containing the results, currently there is no limit to the amount of results returned, so I set it hard-coded, I will add this when I go into more detail on the server side, but for now this would be fine as I work on the front end.

If any additional information is required, please let me know, I will gladly update with any information I may have missed or is required, if it is available.

Answer 1

Moving comments to answer, as the question is mainly opinion-based and may well get closed :)

In theory the code is more reusable if you return the structure from the worker function and let the manager function that called it decide what to do with it. i.e. "Workers work and managers manage". Passing the container down the code tree adds dependencies :)

It is not easy, but the best approach is to think that each function is being written for someone else and you want to be as helpful as possible.

If you change the data structure, of course you will need to refactor, but that is preferable to moving decision-making/dependencies down to a lower level. If anything you want to be forced to review high-level code that is dependent on the data shape.

With regard to parameters being dependencies:

Parameters to functions are only badder when they cause decisions to be made by the function (known as command coupling). Values for lookup and processing are gooder uses for parameters :)