js创建节点鼠标点击调用为何只显示一次

首先代码是基本从课本抄下来的,,应该没有问题。但是我用鼠标点击,添加的
文本一闪而过就没了。想问下是因为什么,这个部分的代码如下

function foe()
        {
            var elew=document.createElement("p");
            var tex=document.createTextNode("你好,世界!");
            elew.appendChild(tex);
            document.forms[0].appendChild(elew);
        }
    </script>
</head>
<body >
    <form action="" name="form2">
        <button onclick="foe();">点击调用DOM</button>
    </form>

2另外请教一下朋友们,平时写前端代码的时候,有什么好工具能发现代码错误
吗?现在我用sublime,写错了一个小点,有时候要检查好久才发现。。。

9个回答

####简单的废话
这个是表单的提交行为造成的


####基础需知
form 元素的action属性是当表单提交时向指定地址处发送表单数据。(会跳转到该地址)
button 有个type属性(默认是submit 某E浏览器默认是button)指定button的行为, submit 就是提交表单的意思(提交自身dom所在的form)


####问题分析
form 有action属性为 '' 也就是当前页面
form 里的 button[type=submit] 点击 触发了form的提交
然后就原地刷新...

####解决问题
找到原因了,解决办法就有很多了:
1.form的action属性去掉 或者 指定为不刷新即 action='#'。
2.button 的type 属性 指定为 非 submit(有button 和 reset 两个属性 可以自行研究)。
3.重构dom结构,把 button 从form中移出到其他位置。


####工具介绍

轻量级(开启迅速,功能有限,依赖插件)

sublime:里面有插件模块,什么代码检查,高亮,提示,都有相关的插件需要自己弄
vscode:基本同上,不过是微软爸爸的东西,一直在更新,插件数量也丰富

重量级(内置功能丰富,oneUnitDragonServe。全栈配套,启动呵呵)

webstrom:标准的重量级老大哥,该有的功能都有,不该有的也齐全,需购po买jie

中量级

HBuilder:国。产。

工具:我自己再写js的时候往往是展示在浏览器中并直接在谷歌浏览器中F12控制台自动调试,并且适当的位置打上debugger断点
你的问题:你用的sublime,这个我没有用过,但是如果是我用的浏览器控制台的话,
1.可以直接在控制台查看点击后是否方法报错
2.如果没报错debugger看一看每一步的值是否正确,是否定位到你想插入的dom
3.用控制台的检查功能检查是否插入进去了,是否有这个dom

一闪而过的原因是你用的button标签,button点击后经常造成页面的刷新,你的文本是JS添上的不是页面本身的,所以刷新后就没了,试试input[type=button],你就会发现功能正常了。工具的话我用的websotrm,JS神器

一闪而过的原因是,是因为你在form里面使用了button,默认是就是提交表单,action为空表示没有跳转默认刷新当前页面。如果是单纯的前端开发就用websotrm,如果还涉及后台开发可以用intellij idea

表单提交会自动刷新一次页面,按钮放在表单里没有设置type,程序自认为是提交,所以刷新了一下页面。导致一闪而过

button 默认type=submit 会提交表单刷新、设置属性 type=button 即可

form表单,button点击,触发了浏览器默认事件,浏览器进行了刷新。所以你添加进去的文字会一闪而逝,解决方法就是阻止默认时间即可。代码如下。



点击调用DOM

function foe(event) { event.preventDefault(); var elew=document.createElement("p"); var tex=document.createTextNode("你好,世界!"); elew.appendChild(tex); document.forms[0].appendChild(elew); }

比较好用的前端开发软件,建议用vscode,插件多,vue,react都能提示。

action='#'

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐