如题描述的结果是必然的。
首先，你需要明白两个问题：第一，js浏览器端脚本，执行在服务端内容响应成功之后，它的appendChild方法，只是在浏览器中进行了 *** 作，并未向服务器发送保存请求（命令）；第二，当你刷新页面的时候，你实际上是通过浏览器向服务器发送了一个请求，而当请求完成后你看到的界面是从服务端返回来的，并不是由浏览器直接产生。
明白了这两点，我给你举个例子说明下：
我们假设服务端有一个html文件，名为index.html，它包含题中所述的那段js
当你刷新页面的时候，index.html 的内容被请求到了浏览器，这时浏览器将它的内容显示给你
当页面显示完成（这里要看你js的位置或调用方式）之后，客户端js开始执行，将button添加到浏览器显示的内容中
而这时，服务器上index.html文件的内容并没有发生改变
所以当你再次刷新，从服务器取index.html的时候，页面内容就恢复到最初状态了。
希望说清楚了，如有疑问欢迎追问，望采纳~
这样：
<body>
<form id='form'> --定义form
</form>
<script>
var input = document.createElement('input') //创建input节点
input.setAttribute('type', 'text') //定义类型是文本输入
document.getElementById('form').appendChild(input ) //添加到form中显示
</script>
</body>
扩展资料：注意事项
一、form属性可以使input标签不再form表单内时也属于form表单中的一部分
<form action="xxx" id="forms">
<input type="submit" value="提交">
</form>
<input type="text" form="forms" name="names">
<!-- IE中不支持这个属性 -->
二、JavaScript提交表单时，可以在input标签内添加required属性，在内容为空的时候阻止表单提交。
使用required属性时添加oninvalid属性可以自定义提示文字
<form action="xxx" method="post">
<input type="text" name="fname" required oninvalid="setCustomValidity('不能为空')">
<input type="submit" value="提交">
</form>
<!-- IE9及更早版本不支持 -->
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）