I have a button and I would like to replace it with other HTML object loaded by google app script via method HtmlService.createTemplateFromFile('HTML_file').

The button onclick function is written in javascript in .html file:

<div id="add_form_button_wraper">
  <input type="button" id="add_form" onclick="addForm()" value="Add Form">
 </div>
 <script>
   function addForm() {
     innerHTML = google.script.run.getForm(some_args);
     document.getElementById("add_form_button_wraper").innerHTML = 
     innerHTML;
  }
</script>

The Code.gs code looks following:

getForm(arg1, arg2) {
  // Creating HTML template from html file.
  var template = HtmlService.createTemplateFromFile(HTML_TEMPLATE);
  template.arg1 = arg1;
  template.arg2 = arg2;
  return template.evaluate().getContent();
}

After clicking the button the content of the div is changed to undefined. I tried also HTMLService.createTemplateFromFile().getCode() with the same effect.

How to insert into div the raw html code obtained from app script HTMLService?

A Simple Web App Example

Here's how I do my dialogs and web apps. I know it doesn't necessarily pertain to your particular situation but hopefully a working example can give you some ideas as to how you can proceed.

This is a simple example of a standard web app form. You can view it as a dialog or run it as a webapp. It stores all of the response on a sheet.

Code.gs:

function onOpen()
{
  SpreadsheetApp.getUi().createMenu('My Tools')
    .addItem('Display Dialog', 'displayDialog')
    .addToUi();
}

function doGet()
{
  var output=HtmlService.createHtmlOutputFromFile('CyclingSurvey');
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Cycling Survey.gs:

function storeCyclingSurveyResults(rA) 
{
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('CyclingSurvey');
  var ts=Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "MM/dd/yyyy HH:mm:ss");
  rA.splice(0,0,ts);
  sh.appendRow(rA);
  return true;
}

function displayDialog()
{
  var html=HtmlService.createHtmlOutputFromFile('CyclingSurvey').setWidth(800).setHeight(500);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Cycling Survey');
}

Cycling Survey.html:

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function recordData()
    {
      var q1=$('#q1').val();
      var q2=$('input[name="prefer"]:checked').val();
      var checked = [];
      $("input[name='own']:checked").each(function (){checked.push($(this).val());});
      var q3=checked.join(', ');
      var q4=$('#q4').val();
      var rA=[];
      rA.push(q1);
      rA.push(q2);
      rA.push(q3);
      rA.push(q4);
      google.script.run
        .withSuccessHandler(setResponse)
        .storeCyclingSurveyResults(rA);
    }
    function setResponse()
    {
      $('#reply').css('display','inline');
      $('#collect').css('display','none');
    }
    console.log('script here');
    </script>
    <style>
    #reply{display:none;}
    #collect{display:block;}
    </style>
</head>  
<body>
<div id="reply" >Thanks for taking the time to take our survey.  Your results have been recorded.</div>
<div id="collect">
<div style="font-weight:bold">What do you like about cycling?</div>
<textarea id="q1" rows="4" cols="50" placeholder="Enter Text Here..."></textarea>
<div style="font-weight:bold">Which type of bike do you prefer?</div>
<input type="radio" name="prefer" value="mountain bike">Mountain Bike<br />
<input type="radio" name="prefer" value="road bike" checked>Road Bike<br />
<input type="radio" name="prefer" value="fitness bike">Fitness Bike<br />
<div style="font-weight:bold">What types of bikes do you currently own?</div>
<input type="checkbox" name="own" value="Mountain Bike">Mountain Bike<br />
<input type="checkbox" name="own" value="Road Bike" checked>Road Bike<br />
<input type="checkbox" name="own" value="All Terrain Bike">All Terain Bike<br />
<input type="checkbox" name="own" value="Fitness Bike">Fitness Bike<br />
<div style="font-weight:bold">Do you prefer riding with others or alone?</div>
Alone<input id="q4" type="range" name="rating" max="10" min="0" step="1" defaultValue="5"/>Others<br />
<input type="button" id="btn1" value="Submit" onClick="recordData();" />
</div>
</body>
</html>