从外部 JS 将子“表”对象附加到 HTML 页面上的“Div”答案

【问题标题】：AppendChild "Table" Object To "Div" on HTML page From External JS从外部 JS 将子“表”对象附加到 HTML 页面上的“Div”
【发布时间】：2020-12-07 10:34:42
【问题描述】：

我有一个 js 函数。该函数创建Table 元素并返回它。我把它放在同一页上，然后它就可以工作了。但我已将该功能设为external js。然后它不工作。如何从外部js在HTML页面上的Div元素中附加Table返回？

外部 JS：

// JavaScript Document
function createtbl() {
  var table = document.createElement("table");
  table.border = "1";

  var row = table.insertRow(-1);
  var cell = row.insertCell(-1);
  cell.innerHTML = "Cell Value";

  var globaldiv = document.getElementById("globaldiv");
  globaldiv.innerHTML = "";
  globaldiv.appendChild(table);

}
createtbl()

&lt;div id="globaldiv"&gt;&lt;/div&gt;

【问题讨论】：

取决于您何时以及如何调用它。请显示页面的那部分。调用函数时globaldiv 是否存在？`
是的，它存在于 HTML 页面中
如果这是外部脚本中的函数，我建议将id 传递给createtbl() 或返回table。只适用于一个特定html页面的功能不需要外包。
如果你调用createtbl()，那么如果有一个名为globaldiv的div，你的脚本就可以工作。如果不是，它不会 - 我为你创建了一个 sn-p
@Lain 我已将此功能设为外部，因为它对所有页面都是通用的。因此，与其在每个页面上重复，不如将其设为外部。

标签： javascript external-js

【解决方案1】：

这将适用于所有包含名为 globaldiv 的 div 的页面

// JavaScript Document
function createtbl() {
  var table = document.createElement("table");
  table.border = "1";

  var row = table.insertRow(-1);
  var cell = row.insertCell(-1);
  cell.innerHTML = "Cell Value";

  var globaldiv = document.getElementById("globaldiv");
  if (globaldiv) {
    globaldiv.innerHTML = "";
    globaldiv.appendChild(table);
  }    

}
window.addEventListener("load",createtbl);

&lt;div id="globaldiv"&gt;&lt;/div&gt;

【讨论】：