Dynamically Create Html Tags Google Scripts

Is there a way to dynamically create HTML tags via google scripts? My code is dynamically creating a form based off a script and I need to set the element IDs for the form. This is

Solution 1:

Dynamic HTML

Many people use the template approach and there's nothing wrong with it but I like to build the html within the google apps script. Here's an example from a webapp that I use all of the time to help me to remember things.

Much of the stuff I do is updating sections of an html page with new content without having to refresh the entire page so many of my functions have javascript counterparts associated with them.

Here's a Code.gs part:

functiongetFuncs()
{
  var br='<br />';
  var funcs=[{desc:'Display HotList',id:'showHotList'},{desc:'Display Last Day',id:'getLastDay'},{desc:'Display Events',id:'dispEvents'},{desc:'Add New Label',id:'addNewLabel'},{desc:'Delete Label',id:'delSelectedLabel'},{desc:'Clear',id:'clear'},{desc:'Create Event',id:'createEvent'},{desc:'Get RemainingDailyQuota',id:'getRDQ'},{desc:'Hide Controls',id:'hideControls'},{desc:'Display Last Week',id:'dispLastSeven'},{desc:'Send HotList',id:'sendHotList'},{desc:'Send Last Day',id:'sendLastDay'},{desc:'Send Last Week',id:'sendLastSeven'}];
  var hl='<strong>Available Functions</strong>';
  //hl+=br + Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "E MMM d, HHmm");
  for(var i=0;i<funcs.length;i++)
  {
    hl+=br + '<label><input class="rad1" type="radio" name="cmdList" value="' + funcs[i].id + '" onClick="selectRadio(\'' + funcs[i].id + '\');" />' + funcs[i].desc + '</label>';
  }
  return hl;
}

And here is the javascript counterpart:

functiongetFuncs()
{
    google.script.run
      .withSuccessHandler(dispInHotBox)
      .getFuncs();
}

functiondispInHotBox(hl)
{
  document.getElementById('hotbox').innerHTML=hl;
}

This function builds as drop down list that displays a number of extra functions some of which reprogram a single button on my form. I did it this way to keep the number of controls on my phone down to a minimum.

And this is the javascript that reprograms the button.

functionselectRadio(id)
    {
      $('#btn3').unbind('click');
      $('#btn3').val('Select Function');
      $('#btn3').prop('disabled',true);
      $('#txt2').prop('placeholder','');
      switch(id)
      {
        case'showHotList':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(showHotList);
          $('#btn3').val('Display Hotlist');
          $('#btn3').removeAttr('disabled')
          break;
        case'sendHotList':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(sendHotList);
          $('#btn3').val('Send Hotlist');
          $('#btn3').removeAttr('disabled');
          break;
        case'sendLastSeven':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(sendLastSeven);
          $('#btn3').val('Send Last 7');
          $('#btn3').removeAttr('disabled');
          break;
        case'dispLastSeven':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(dispLastSeven);
          $('#btn3').val('Display Last 7');
          $('#btn3').removeAttr('disabled');
          break;
        case'sendLastDay':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(sendLastDay);
          $('#btn3').val('Send 1 Day');
          $('#btn3').removeAttr('disabled');
          break;
        case'getLastDay':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(getLastDay);
          $('#btn3').val('Display 1 Day');
          $('#btn3').removeAttr('disabled');
          break;
        case'addNewLabel':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(addNewLabel);
          $('#btn3').val('Add Label');
          $('#btn3').removeAttr('disabled');
          $('#txt2').prop('placeholder','New Label');
          break;
        case'delSelectedLabel':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(delSelectedLabel);
          $('#btn3').val('Delete Label');
          $('#btn3').removeAttr('disabled');
          break;
        case'getRDQ':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(getRDQ);
          $('#btn3').val('RDQ');
          $('#btn3').removeAttr('disabled');
          break;
         case'createEvent':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(createEvent);
          $('#btn3').val('Create Event');
          $('#btn3').removeAttr('disabled');
          $('#txt2').prop('placeholder','title/hr/min/xx/xx/xx');
          break;
         case'dispEvents':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(dispEvents);
          $('#btn3').val('Display Events');
          $('#btn3').removeAttr('disabled');
          $('#txt2').prop('placeholder','');
          break;
        case'hideControls':
          document.getElementById('hotbox').innerHTML='';
          $('#btn3').click(hideControls);
          $('#btn3').val('Hide Controls');
          $('#btn3').removeAttr('disabled');
          $('#txt2').prop('placeholder','');
          break;
        default:
          document.getElementById('hotbox').innerHTML='';
          break;
      }