使用innerHTML的Javascript无法在HEAD中添加脚本标签

Question

我试图在每次用户提供 JSON 文件时动态创建一个函数。在表单的 onSubmit 事件中调用以下函数。

我没有看到这段代码工作。在调试时，我看到额外的元素出现在 HEAD 部分，但一旦函数调用结束，它就会消失。

但是，如果我在 JS 文件中显式调用函数 createType()，它就会起作用。但我的要求是函数 createType 应该仅在单击按钮时调用，并且应该动态创建一个函数。

function createType() {
  var jsonString = document.getElementById("json").value;
  var obj = JSON.parse(jsonString)
  var script = document.createElement("script");
  script.innerHTML = "function Friend(){ ";
  for (var i = 0; i < obj.fields.length; i++) {
    if (obj.fields[i].name != "") {
      alert(obj.fields[i].name);
      script.innerHTML += "var " + obj.fields[i].name + ";" +
        "this.get=function(){ alert('test');}";


    }
  }
  script.innerHTML += "}";

  document.head.appendChild(script);
}
var firstFriend = new Friend();
firstFriend.get(); // should trigger an alert box.

最后两行抛出错误，因为在任何地方都找不到包含函数“Friend”的新脚本标记。

即使从按钮单击事件调用 createType()，我也希望附加脚本保留在 HEAD/BODY 中。

Answer 1

The following function is called at onSubmit event of the form.

I dont see this code working. While debugging, I saw that the extra element appears in the HEAD section but as soon as the function call gets over, it disappears.

您正在运行脚本，然后正在提交表单，这会导致页面重新加载。该脚本尚未在新页面上运行，因此更改不再存在。

您需要调用.preventDefault()在事件对象上停止表单提交完成。

如果你需要表单提交，那么你还需要用Ajax代替常规提交，或者改变你的做法，根据页面加载时提交的数据触发JS。