如何解决使用 javascript div.appendChild(content) 添加内容后网页保持空白
目标:
我正在尝试使用 javascript 构建一个简单的搜索表单。
原型可以在这里找到: Julian Bechtolds Blogworld - overview
问题:
点击“提交”后网页没有显示任何加载的内容
有时我会看到一瞬间添加的文本,然后又消失了。此外,我在表单中输入的所有文本都消失了。
这使我得出结论,网页正在正确更新,但在脚本执行后立即重新加载,这会擦除所有添加的内容。
代码:
最小可重现样本:
html:
<main>
<form onsubmit="LoadArticles()">
<input type="submit" value="Submit">
</form>
<div id="pages"></div>
</main>
javascript:
function LoadArticles() {
var div = document.getElementById('pages');
var content = document.createTextNode("test");
div.appendChild(content);
}
问题:
为什么我的页面在执行脚本后重新加载?
如何防止我的页面重新加载,这会擦除所有使用 javascript 添加的内容?
解决方法
为了防止网页在表单提交时重新加载,请使用 preventDefault()
函数。此函数基本上取消任何可取消的事件,并且不会遵循该事件的默认行为。但这并不意味着您不能使用表单或在输入字段中填充值。如果您有任何 textarea
并且您提交了一个表单,您始终可以在被调用的函数中访问该文本区域的值。
您可以阅读有关此函数 here 的更多信息。
function LoadArticles(event) {
event.preventDefault(); // Cancels a cancelable event
var div = document.getElementById('pages');
var content = document.createTextNode("test");
div.appendChild(content);
}
<main>
<form onsubmit="LoadArticles(event)">
<input type="submit" value="Submit">
</form>
<div id="pages"></div>
</main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。