使用innerHTML的Javascript无法在头部添加脚本标记

我试图在每次用户提供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.

函数createType（）{
var jsonString=document.getElementById（“json”）.value；
var obj=JSON.parse（jsonString）
var script=document.createElement（“脚本”）；
script.innerHTML=“函数Friend（）{”；
对于（变量i=0；i

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

我希望附加的脚本保持在HEAD/BODY中，即使createType（）是从按钮单击事件调用的

在表单的onSubmit事件中调用以下函数

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

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

您需要调用事件对象来停止表单提交

---

如果需要提交表单，那么还需要使用Ajax替换常规提交，或者更改方法，并在加载页面时根据提交的数据触发JS

body标签也有同样的问题。如果我尝试在body标记中添加script元素，而不是上面代码中描述的HEAD标记，我将面临同样的问题。非常感谢您的回答。我正在努力理解你的观点。问题是事件不一定要提交。即使我在一个按钮的点击事件中调用它。我面临同样的问题。这里不涉及服务器操作。都是本地作品。正如你所说，在提交时调用例程是个问题。当我试图从一个按钮的“onClick”事件中调用它时，我搞错了一些东西。现在效果很好。不过，我还是要学习一下PreventedTault（）。谢谢你的回答。