JavaScript代码独立运行正常，封装为函数后无法生成按钮如何解决？

嘿，我来帮你排查这个按钮不显示的问题～你遇到的情况很常见，核心原因大概率是函数调用的时机不对，或者函数内部代码有遗漏，咱们一步步来解决：

第一步：确认函数代码完整性 #

首先要确保你封装的prueba()函数里的代码和原来能正常运行的代码完全一致，别省略创建文本节点、追加元素这些关键步骤。完整的函数应该是这样的：

function prueba(){
  var btn = document.createElement("BUTTON");// 创建button元素
  btn.setAttribute('type', 'button'); 
  btn.setAttribute('value', 'prueba');
  btn.setAttribute('id', 0);
  var t = document.createTextNode("prueba"); // 创建按钮上的文本节点
  btn.appendChild(t); // 把文本添加到按钮中
  document.body.appendChild(btn); // 把按钮挂载到页面body上
};

如果函数里的.......是实际代码中真的省略了这些步骤，那按钮肯定不会显示哦。

第二步：检查函数调用的时机 #

原来的代码直接写在<tbody>标签里，这时候浏览器已经渲染到页面的body部分，document.body已经存在，所以能正常追加按钮。但封装成函数后，如果你在<head>标签里直接调用prueba()，这时候浏览器还没渲染出body元素，执行document.body.appendChild(btn)会找不到目标，自然不会显示按钮。

这里给你两种可靠的解决方法：

方法1：把函数调用放在<body>末尾 #

把调用代码放在</body>标签之前，确保body已经被浏览器创建：

<!DOCTYPE html>
<html>
<head>
  <script>
    function prueba(){
      // 完整的函数代码
      var btn = document.createElement("BUTTON");
      btn.setAttribute('type', 'button');
      btn.setAttribute('value', 'prueba');
      btn.setAttribute('id', 0);
      var t = document.createTextNode("prueba");
      btn.appendChild(t);
      document.body.appendChild(btn);
    };
  </script>
</head>
<body>
  <!-- 你的页面表格内容 -->
  <table class="table table-striped table-bordered table-list" id="table">
    <tbody id="tbody"></tbody>
  </table>

  <!-- 在这里调用函数，可多次调用生成多个按钮 -->
  <script>
    prueba();
    prueba();
  </script>
</body>
</html>

方法2：监听DOM加载完成事件 #

用DOMContentLoaded事件确保在整个DOM树加载完成后再执行函数，这样不管调用代码放在哪里都没问题：

<!DOCTYPE html>
<html>
<head>
  <script>
    function prueba(){
      // 完整的函数代码
      var btn = document.createElement("BUTTON");
      btn.setAttribute('type', 'button');
      btn.setAttribute('value', 'prueba');
      btn.setAttribute('id', 0);
      var t = document.createTextNode("prueba");
      btn.appendChild(t);
      document.body.appendChild(btn);
    };

    // 等待DOM全部加载完成后执行函数
    document.addEventListener('DOMContentLoaded', function() {
      prueba();
      prueba(); // 多次调用生成多个按钮
    });
  </script>
</head>
<body>
  <!-- 你的页面表格内容 -->
  <table class="table table-striped table-bordered table-list" id="table">
    <tbody id="tbody"></tbody>
  </table>
</body>
</html>

第三步：用浏览器控制台排查错误 #

如果还是不行，按F12打开浏览器的开发者工具，切换到「控制台」标签，看看有没有报错信息。比如如果显示Cannot read properties of null (reading 'appendChild')，那就是document.body还不存在的问题，用上面的方法2就能解决。

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