appendChild 在函数外工作但不在函数内

Question

我的 code.I 尝试使用 JavaScript 创建 "DIV" 和 "P" 标签的某些部分有问题，但它仅在我输入代码时有效在函数之外（函数被称为 "fo" ）。当你点击按钮时，会出现一个对话框，如果你点击取消，appendChild 方法应该把 "div" 和 "p" 标签放在"body".

我应该补充一点，p 标签中的文本可以在屏幕上短暂地看到，然后 vanishes.My 浏览器突然变成了 Google Chrome。

<html>
<body>
</body>
<script> 
function give(){
form = document.createElement("FORM");
input = document.createElement("INPUT");
input.setAttribute("type", "submit");
input.setAttribute("value", "button");
form.setAttribute("id", "abc");
form.setAttribute("onsubmit", "fo()");
textarea = document.createElement("TEXTAREA");
textarea.setAttribute("id", "txt");
form.appendChild(input);
form.appendChild(textarea);
document.body.appendChild(form);
document.getElementById("abc").method = "post";
}
  give();
  function fo(){
a = document.getElementById("txt").value; 
cfm = confirm("Are you sure you want changes");
if (cfm == false ) {
div = document.createElement("DIV");
p = document.createElement("P");
ptxt = document.createTextNode("test");
p.setAttribute("id", "centr");
p.appendChild(ptxt);
div.appendChild(p);
document.body.appendChild(div);
}
}
/*When this part of code is outside function fo() , appendChild works correctly
  div = document.createElement("DIV");
  p = document.createElement("P");
  ptxt = document.createTextNode("Outside the function it works");
  p.setAttribute("id", "centr");
  p.appendChild(ptxt);
  div.appendChild(p);
  document.body.appendChild(div); 
  */
  </script>
  </html>

Answer 1

您遇到了表单提交的默认行为，即导航到 action 属性中指定的页面，或者如果 action 未指定则重新加载当前页面。

您需要对代码进行以下更改以解决此问题：

修改提交处理程序注册为form.setAttribute("onsubmit", "fo(event)");
将 fo() 函数签名更改为 fo(event)
在if (cfm == false)条件体的末尾调用event.preventDefault()

因此您的代码将如下所示：

<html>
<body>
</body>
<script>
    function give(){
        form = document.createElement("FORM");
        input = document.createElement("INPUT");
        input.setAttribute("type", "submit");
        input.setAttribute("value", "button");
        form.setAttribute("id", "abc");
        form.setAttribute("onsubmit", "fo(event)");
        textarea = document.createElement("TEXTAREA");
        textarea.setAttribute("id", "txt");
        form.appendChild(input);
        form.appendChild(textarea);
        document.body.appendChild(form);
        document.getElementById("abc").method = "post";
    }
    give();
    function fo(event){
        a = document.getElementById("txt").value;
        cfm = confirm("Are you sure you want changes");
        if (cfm == false ) {
            div = document.createElement("DIV");
            p = document.createElement("P");
            ptxt = document.createTextNode("test");
            p.setAttribute("id", "centr");
            p.appendChild(ptxt);
            div.appendChild(p);
            document.body.appendChild(div);
            event.preventDefault();
        }
    }
</script>
</html>

appendChild 在函数外工作但不在函数内

appendChild works outside the function but not inside

html

javascript

appendchild