使用 javascript div.appendChild(content) 添加內容后網頁保持空白

Question

目標：

我正在嘗試使用 javascript 構建一個簡單的搜索表單。

按下提交按鈕后，頁面上應加載子頁面（博客文章）：

原型可以在這里找到： Julian Bechtolds Blogworld - 概述

問題：

按“提交”后網頁不顯示任何加載的內容
有時我可以在一瞬間看到添加的文本，然后又消失了。 此外，我在表單中輸入的所有文本都消失了。 這使我得出結論，網頁正在正確更新，但在腳本執行后立即重新加載，這會擦除所有添加的內容。

請注意，當我按下提交時，“測試”會出現一瞬間，然后再次消失

代碼：

最小可重復樣品：
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

為了防止 web 頁面在表單提交時重新加載，請使用preventDefault() function。 這個 function 基本上取消了任何可取消的事件，並且不會遵循該事件的默認行為。 但這並不意味着您不能使用 forms 或在輸入字段中填充值。 如果您有任何textarea並提交了表單，您始終可以訪問名為 function 內的該 textarea 的值。

您可以在此處閱讀有關此 function 的更多信息。

 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>