使用javascript div.appendChild（content）添加内容后，网页保持为空 目标：

我正在尝试使用javascript构建一个简单的搜索表单

按下提交按钮后，应在页面上加载子页面（博客文章）：

原型可在此处找到：

问题: 按“提交”后，网页不会显示任何加载的内容
有时我能在瞬间看到添加的文本，然后又消失了。此外，我在表单中键入的所有文本都将消失。 这让我得出结论，网页正在正确更新，但在脚本执行后立即重新加载，这会清除所有添加的内容

请注意，当我按Submit时，“test”会在一瞬间出现，然后再次消失

代码： 最小可重复样品：
html:

javascript:

function LoadArticles() {
    var div = document.getElementById('pages');
    var content = document.createTextNode("test");
        div.appendChild(content);
}

问题: 为什么在执行脚本后我的页面会重新加载？

---

如何防止网页重新加载，这会擦除所有使用javascript添加的内容？

为了防止网页在表单提交时重新加载，请使用

preventDefault（）

函数。此函数基本上取消任何可取消的事件，并且不会遵循该事件的默认行为。但这并不意味着不能使用表单或在输入字段中填充值。如果您有任何

textarea

，并且您提交了一个表单，那么您始终可以在被调用函数中访问该textarea的值

您可以阅读有关此函数的更多信息

函数装入文章（事件）{
event.preventDefault（）；//取消可取消的事件
var div=document.getElementById（'pages'）；
var content=document.createTextNode（“测试”）；
子类（内容）；
}

---

为了防止在表单提交时重新加载网页，请使用

preventDefault（）

函数。此函数基本上取消任何可取消的事件，并且不会遵循该事件的默认行为。但这并不意味着不能使用表单或在输入字段中填充值。如果您有任何

textarea

，并且您提交了一个表单，那么您始终可以在被调用函数中访问该textarea的值

您可以阅读有关此函数的更多信息

函数装入文章（事件）{
event.preventDefault（）；//取消可取消的事件
var div=document.getElementById（'pages'）；
var content=document.createTextNode（“测试”）；
子类（内容）；
}

您的问题是什么…更新了我的代码和问题。我希望这个问题现在更加明显。我正在尝试更新我的页面，但在更新后会立即重新加载，因此所有更改都会丢失。您的问题是什么…更新了我的代码和问题。我希望这个问题现在更加明显。我正在尝试更新我的页面，但在更新后会立即重新加载，因此所有更改都会丢失。非常感谢您的回答。表单本身是否有执行的事件？默认情况下，

submit

按钮刷新或重新加载页面。我们所要做的就是防止这种默认行为。我们可以使用

preventDefault（）

函数来实现这一点。回答得好。关于支持链接，W3Schools可能比以前更好了，但几年前，它们的JavaScript引用是出了名的不可靠。所以我养成了总是使用MDN的习惯，MDN对几乎所有JavaScript都非常权威。（任何感兴趣的人都可以查看此特定API。）也感谢您的建议。我以前曾使用W3学校作为参考，但我不知道我会如何找到这个…非常感谢你的答案。表单本身是否有执行的事件？默认情况下，

submit

按钮刷新或重新加载页面。我们所要做的就是防止这种默认行为。我们可以使用

preventDefault（）

函数来实现这一点。回答得好。关于支持链接，W3Schools可能比以前更好了，但几年前，它们的JavaScript引用是出了名的不可靠。所以我养成了总是使用MDN的习惯，MDN对几乎所有JavaScript都非常权威。（任何感兴趣的人都可以查看此特定API。）也感谢您的建议。我以前曾使用W3学校作为参考，但我不知道我会如何找到这个。。。