jQuery function to create a container div with some content I just recently started with Javascript and jQuery. My background is in Python. I would be more than happy to get some feedback if this coding style of mine is optimal, or if in JS people generally write things differently. 

The current task is to build different elements in a website that are always hosted in the same container. I have written a container creation function like this:

  function create_container(type, counter) {
      var ret = $('&lt;div /&gt;').attr({
          class: 'container-box',
      }).data({
          type: type,
          counter: counter,
      }).append(
          $('&lt;span /&gt;').attr({
              class: 'remove'
          }).append('&amp;times;')
      );
      return ret
  }

  var b = create_container('text', 0);
  console.log(create_container('text', 0));


This function will then be reused in different objects to create the same containing container. Type and counter will be set when the object will be initiated.
First of all, In terms of readability, when chaining jquery operations, I like to put the operation at the start of the line. When I create an Object with only one attribute, a one liner with no trailing comma is also good. And naming your jquery objects with a heading $ makes anyone understand that you're using a jquery object here : 

function create_container(type, counter) {
      var $ret = $('&lt;div /&gt;')
          .attr({class: 'container-box'})
          .data({
              type: type,
              counter: counter,
          })
          .append(
              $('&lt;span /&gt;')
                  .attr({class: 'remove'})
                  .append('&amp;times;')
          );
      return $ret
  }

  var $b = create_container('text', 0);
  console.log(create_container('text', 0));


Then you coud use the jquery method addClass instead of attr({class: 'foo'} :

function create_container(type, counter) {
  var $ret = $('&lt;div /&gt;')
      .addClass('container-box')
      .data({
          type: type,
          counter: counter,
      })
      .append(
          $('&lt;span /&gt;')
              .addClass('remove')
              .append('&amp;times;')
      );
  return $ret
}

var $b = create_container('text', 0);
console.log(create_container('text', 0));


Finally, if you get to use es6, you could get this kind of code, which I find a lot more readable :

function create_container(type, counter) {
  const $ret = $('&lt;div /&gt;')
      .addClass('container-box')
      .data({type, counter})
      .append(
          $('&lt;span /&gt;')
              .addClass('remove')
              .append('&amp;times;')
      );
  return $ret
}

const $b = create_container('text', 0);
console.log(create_container('text', 0));