使用 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>

html insert javascript jquery