这段代码的目的是在页面末尾添加一篇文章，但问题是出现然后消失

Question

这段代码的目的是在页面末尾添加一篇文章，但问题是出现了它desappear.please帮我弄清楚:)

        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>

Answer 1

这是因为您在使用表单时并未阻止提交。这里不需要表单，默认情况下它会提交到它所在的同一页面，导致 window 重新加载。

这里已经讨论过了：How to prevent form from being submitted?

这段代码的目的是在页面末尾添加一篇文章，但问题是出现然后消失

the purpose of this code is to add an article at the end of the page, but the broblem is that appear then it desappear

javascript

article

dom