Question

我开始使用javascript，我的问题是：我有这个代码，没有问题：

<table class="table table-striped table-bordered table-list" id="table">
    <tbody id="tbody">
        <script>
            var btn = document.createElement("BUTTON");// Create a <button> element
            btn.setAttribute('type', 'button'); // input element of type button
            btn.setAttribute('value', 'prueba');
            btn.setAttribute('id', 0);

            var t = document.createTextNode("prueba");       // Create a text node
            btn.appendChild(t);                                // Append the text to <button>
            document.body.appendChild(btn);
        </script>
    </tbody>
</table>

但我需要在同一页面上多次使用它。所以我试着在一个函数上添加它，就像那样：

<script>
   function prueba(){

        var btn = document.createElement("BUTTON");
        .......
        document.body.appendChild(btn);
   };
</script>

问题是当我用以下函数调用此函数时：

<script>prueba();</script>

代码不显示任何按钮。当相同的代码在函数外部时，这是有效的，但是当我在函数中添加此代码时，这不起作用。

我该如何解决？

Answer 1

当DOM准备就绪时，你必须调用你的函数。

<script>window.onload = prueba;</script>

Answer 2

编辑：来自Kevin Bouchers的评论。

你可以这样称呼onload：

＆＃13;

window.addEventListener('DOMContentLoaded', prueba())

function prueba() {
  var btn = document.createElement("BUTTON"); // Create a <button> element
  btn.setAttribute('type', 'button'); // input element of type button
  btn.setAttribute('value', 'prueba');
  btn.setAttribute('id', 0);
  var t = document.createTextNode("prueba"); // Create a text node
  btn.appendChild(t); // Append the text to <button>
  document.body.appendChild(btn)
}

＆＃13;

<table class="table table-striped table-bordered table-list" id="table">
  <tbody id="tbody">
  </tbody>
</table>

＆＃13;

当我在函数

2 个答案: