如何正确将HTML代码追加到div？追加后table内按钮位置错位如何解决？

问题原因 #

你的HTML结构不符合语法规范：<tbody> 标签的直接子元素只能是 <tr> 表格行，你直接将按钮 input 放在 <tbody> 下，浏览器渲染时会自动将这个非法元素移动到 <table> 标签的外部上方，导致按钮错位。

修复方案 #

可选两种实现方式，按需调整即可：

• 方案1：按钮放在表格最后一行
  将按钮包裹在单独的表格行内，设置单元格跨列占满整行，代码如下：

  <div id="tables"></div>
  <script>
  var HTML_new_group = '\
  <h4>'+gpName+'</h4>\
  <table border="1">\
      <thead>\
          <tr>\
              <td>option</td>\
              <td>value</td>\
          </tr>\
      </thead>\
      <tbody>\
          <tr>\
              <td><input type="text" class="np-gp-option" data-np-gp-option-id="'+gpId+'"></td>\
              <td><input type="text" class="np-gp-value" data-np-gp-value-id="'+gpId+'"></td>\
          </tr>\
          <tr>\
              <td colspan="2">\
                  <input type="button" value="Add" class="np-gp-add" data-np-gp-add-id="'+gpId+'" />\
              </td>\
          </tr>\
      </tbody>\
  </table>';
  $(HTML_new_group).appendTo("#tables");
  </script>
  

• 方案2：按钮放在表格外部
  如果不需要按钮展示在表格范围内，直接将按钮移到</table>标签外部即可：

  var HTML_new_group = '\
  <h4>'+gpName+'</h4>\
  <table border="1">\
      <thead>\
          <tr>\
              <td>option</td>\
              <td>value</td>\
          </tr>\
      </thead>\
      <tbody>\
          <tr>\
              <td><input type="text" class="np-gp-option" data-np-gp-option-id="'+gpId+'"></td>\
              <td><input type="text" class="np-gp-value" data-np-gp-value-id="'+gpId+'"></td>\
          </tr>\
      </tbody>\
  </table>\
  <input type="button" value="Add" class="np-gp-add" data-np-gp-add-id="'+gpId+'" />';
  

内容的提问来源于stack exchange，提问作者Mehdi pwn