title: Javascript DRY Design Patterns - Functions vs Object
body: <p>Below is a code snippet of a function that creates and appends div HTML objects.  The function is called from another function which appends additional elements to it.  </p>
  
  <p>I'm finding myself writing similar code as whats illustrated below. I know there has to be another more efficient way writing this code. What dry design pattern should I using?  Is the object notation better for something like this? Examples would be great.</p>
  
  <pre><code>function create_element_container(){
    var newElement = document.createElement('div'); //create container element
        newElement.className = 'dropped'; //add classes to container element      
  
    var controllerContainer = document.createElement('div');
        controllerContainer.className = 'drop-element-controls';
  
        newElement.appendChild(controllerContainer);//Append controller container to main div
  
    var controller_left = document.createElement('div');
        controller_left.className = 'drop-move-controller';
  
        controllerContainer.appendChild(controller_left);
  
        var controller_left_move = document.createElement('div');
            controller_left_move.className = 'drop-move';
  
              controller_left.appendChild(controller_left_move);
  
              var controller_left_icon = document.createElement('span');
                  controller_left_icon.className = 'fa fa-question fa-lg';
  
                  controller_left_move.appendChild(controller_left_icon);
  
        controllerContainer.appendChild(controller_left); //Append controller Left
  
  
    var controller_middle = document.createElement('div')
        controller_middle.className = 'drop-sortable-controller';
  
        controllerContainer.appendChild(controller_middle);
  
        var controller_middle_sortable = document.createElement('div');
            controller_middle_sortable.className = 'drop-sortable';
  
            controller_middle.appendChild(controller_middle_sortable);
  
              var controller_middle_icon = document.createElement('span');
                  controller_middle_icon.className = 'fa fa-arrows fa-lg';
  
                  controller_middle_sortable.appendChild(controller_middle_icon);
  
        controllerContainer.appendChild(controller_middle); //Append controller Left
  
  
    var controller_right = document.createElement('div')
        controller_right.className = 'drop-remove-controller';
  
        controllerContainer.appendChild(controller_right);
  
        var controller_right_move = document.createElement('div');
            controller_right_move.className = 'drop-remove';
  
            controller_right.appendChild(controller_right_move);
  
              var controller_right_icon = document.createElement('span');
                  controller_right_icon.className = 'fa fa-remove fa-lg';
  
                  controller_right_move.appendChild(controller_right_icon);
  
    return newElement;
  
  }
  </code></pre>