使用 javascript div.appendChild(content) 添加内容后网页保持空白

Question

目标：

我正在尝试使用 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 添加的所有内容？

Answer 1

为了防止网页在表单提交时重新加载，请使用 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>

使用 javascript div.appendChild(content) 添加内容后网页保持空白

Webpage stays empty after adding content with javascript div.appendChild(content)

html

javascript

jquery

insert

目标：

问题：

代码：

问题：