这段代码的目的是在页面的末尾添加一篇文章，但是那个问题就出现了，然后它就会消失了。请帮我把它弄清楚:)
const button = document.getElementById("buttad");
function addNewArticle() {
const fragment = document.createDocumentFragment();
const header = document.createElement("p");
header.textContent ="Ferhane riyadh ";
const text = document.createElement("p");
text.textContent ="Ferhane riyadh ";
fragment.appendChild(header);
fragment.appendChild(text);
document.body.appendChild(fragment);
}
button.addEventListener("click", addNewArticle); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>adding articles</title>
</head>
<body>
<div>
<form>
<input type="text" name="title" id="title" placeholder="TAP YOUR TITLE" style="display:block; margin-bottom: 5px; margin-left:8px;">
<input type="text" name="description" id="description" placeholder="DESCRIPTION" style="display:block; margin-left:8px;">
<button id="buttad" style="padding:3px; position:absolute; left:12%; margin-top:12px; background-color: black; color: white; outline: none; border: black 1px solid; cursor: pointer ">ADD</button>
</form>
</div>
</body>
</html>这是因为您使用表单而不阻止提交表单。这里不需要表单，默认情况下它将提交到它所在的同一页面，导致窗口重新加载。