如何点击按钮从外部JS文件加载表格行（TR/TD）

需求：页面加载时仅显示表格表头，点击按钮后从外部JS文件加载表格行（<tr>和<td>元素）到指定容器中。

HTML 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
  <body>
    <div id="container">
      <button onclick="getScript('Insert.js')">插入表格行</button> 
      <div id="Table">
        <table id='TableResult1'>
          <th>颜色</th>
          <th>数字</th>
          <th>字母</th>
          <div id="myTableInsertRows"></div> 
        </table>
      </div> 
    </div>
  </body>
  <script type="text/javascript">
    getScript=(url)=>{
      var script = document.createElement('script');
      script.setAttribute('type', 'text/javascript');
      script.setAttribute('src', url);
      if(document.body == null){
         document.head.appendChild(script);
      }else{
         document.body.appendChild(script);
      }
    }
  </script>
</html>

外部JS文件（Insert.js）代码 #

var Insert = '\n<tr><td>红色</td><td>1</td><td>AAAA</td></tr>';
document.getElementById('myTableInsertRows').innerHTML = Insert;

规范优化提示 #

HTML标准中<table>标签内不能直接嵌套<div>元素，这种写法可能引发浏览器渲染异常。建议将容器改为<tbody>元素，让表格结构符合规范：

<table id='TableResult1'>
  <thead>
    <tr>
      <th>颜色</th>
      <th>数字</th>
      <th>字母</th>
    </tr>
  </thead>
  <tbody id="myTableInsertRows"></tbody> 
</table>

内容的提问来源于stack exchange，提问作者Rick D