动态创建 HTML 标签 Google 脚本

Question

有没有办法通过谷歌脚本动态创建 HTML 标签？ 我的代码是根据脚本动态创建表单，我需要为表单设置元素 ID。

这是我目前的方法，但是当我查看最终页面的来源时，“id”标签中没有任何值。

<input id="<? x ?>" type="checkbox">

x 是一个在循环中被修改的变量。

Answer 1

动态 HTML

许多人使用模板方法并没有什么问题，但我喜欢在 google 应用程序脚本中构建 html。下面是一个 web 应用程序的示例，我一直使用它来帮助我记住事情。

我所做的大部分工作是用新内容更新 html 页面的各个部分，而不必刷新整个页面，因此我的许多函数都有与之关联的 javascript 对应项。

这是 Code.gs 部分：

function getFuncs()
{
  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;
}

这里是对应的javascript：

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

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

此函数构建为下拉列表，其中显示了许多额外的函数，其中一些函数对我的表单上的单个按钮进行了重新编程。我这样做是为了将手机上的控件数量降至最低。

这是对按钮重新编程的 javascript。

    function selectRadio(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;
      }