jQuery concat data of array

To create a string of HTML, using non-jQuery JavaScript, you could use the following approaches:

// here we create a string of HTML, using a String literal,
// and concatenate that String with another:
var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' +

  // here we use Array.prototype.join() to combine the
  // Array elements of the options Array (an Array of
  // Strings) together using a zero-length string:
  options.join('') +

  // and then concatenate the String-so-far with the final
  // String to close the resulting <select> element:
  '</select>';

// creating the options Array:
var options = ['<option name="demo">opt1</option>', '<option name="demo">opt2</option>', '<option name="demo">opt3</option>']


var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' + options.join('') + '</select>';

document.body.insertAdjacentHTML('beforeend', html);

JS Fiddle demo.

This is only possible if the options Array elements are strings, though. If they're DOM nodes, then you can use the following instead (to, again, create a string of HTML):

// similarly to the above approach, we have a String literal
// to open the resulting <select> element, and then we use
// Array.prototype.join() to create a String from the
// options Array-elements:
var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' +

  // here we have an Array of HTMLOptionElements, which we must
  // convert to Strings, comprised of their own HTML, so
  // we use an Arrow function to change the Array,
  // map takes the current Array-element ('opt') and returns
  // the outerHTML of that node to the Array, and then the
  // resulting Array of HTML-Strings is joined together to
  // form an HTML-String:
  options.map( opt => opt.outerHTML ).join('') +

  // and again closing the resulting <select> element:
  '</select>';

// creating the options Array:
var options = new Array(3).fill('').map(function(_, i) {
  var o = document.createElement('option');
  o.value = 'demo';
  o.text = 'opt' + i;
  return o;
});

var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' + options.map(opt => opt.outerHTML).join('') + '</select>';

document.body.insertAdjacentHTML('beforeend', html);

However it's often better to use the DOM to create Nodes that can be inserted into the document, rather than creating strings. To use the DOM API approach of creating nodes, the following is possible (albeit more verbose):

// here we directly create a <select> element:
var selectElement = document.createElement('select');

// set its 'id' and 'name' to the String of 'mission_reward':
selectElement.id = selectElement.name = 'mission_reward';

// add the 'select_reward' class-name:
selectElement.classList.add('select_reward');

// iterate over the options Array and, on each iteration,
// append the current <option> ('opt') to the created 
// <select> element:
options.forEach( opt => selectElement.appendChild(opt) );

// creating the options Array:
var options = new Array(3).fill('').map(function(_, i) {
  var o = document.createElement('option');
  o.value = 'demo';
  o.text = 'opt' + i;
  return o;
});

var selectElement = document.createElement('select');

selectElement.id = selectElement.name = 'mission_reward';
selectElement.classList.add('select_reward');

options.forEach(opt => selectElement.appendChild(opt));

document.body.appendChild(selectElement);