Question

此代码的目的是在页面末尾添加一篇文章，但问题是先出现后消失，请帮我弄清楚：）

        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

这是因为您在使用表单时不会阻止其提交。这里不需要表单，默认情况下它将提交到所在页面，从而重新加载窗口。

对此已在此处进行了讨论：How to prevent form from being submitted?

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

1 个答案: