为什么发送表单后所有页面都被清除？

Question

为什么发送表单后我的所有页面都被清除了？

我的代码： http://jsbin.com/belikusate/edit?html,js,output

Answer 1

将 submit.type 更改为“按钮”而不是 'submit'

Answer 2

事实是，具有提交类型输入字段的表单的默认行为是执行完整 post。为了将元素插入 div 并防止默认行为，只需更改此

document.getElementById("add").addEventListener("click", function(){
    creerElementLien(test);
});

至此

document.getElementById("formulaire").addEventListener("submit", function(e){
  e.preventDefault();   

  creerElementLien(test);

});

请检查以下代码，看看这是不是您想要的结果。

var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

var test = 
{
 titre: "test",
 url: "http://url.fr",
 auteur: "auteur"
};

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = creerElementLien(lien);
    contenu.appendChild(elementLien);
});

function ajouterLien() {
 
 var formulaire = document.createElement("form");
 formulaire.id = "formulaire";
 
 var nom = document.createElement("input");
 nom.placeholder = "Entrez votre nom";
 nom.required = "required";
 nom.style.marginRight = "20px";
 nom.name = "nom";

 var titre = document.createElement("input");
 titre.placeholder = "Titre du lien";
 titre.required = "required";
 titre.style.marginRight = "20px";
 titre.name = "titre";

 var url = document.createElement("input");
 url.placeholder = "Entrez l'URL ou le lien";
 url.required = "required";
 url.style.marginRight = "20px";
 url.name = "url";

 var submit = document.createElement("input");
 submit.id = "add";
 submit.value = "Ajouter";
 submit.type = "submit";
 
 document.getElementById("body").insertBefore(formulaire, document.getElementById("contenu"));
 document.getElementById("formulaire").appendChild(nom);
 document.getElementById("formulaire").appendChild(titre);
 document.getElementById("formulaire").appendChild(url);
 document.getElementById("formulaire").appendChild(submit);

 document.getElementById("formulaire").addEventListener("submit", function(e){
   e.preventDefault(); 
      
      creerElementLien(test);
        
 });
}

function creerElementLien(lien) {
    var titreLien = document.createElement("a");
    titreLien.href = lien.url;
    titreLien.style.color = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight = "5px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    var ligneTitre = document.createElement("h4");
    ligneTitre.style.margin = "0px";
    ligneTitre.appendChild(titreLien);
    ligneTitre.appendChild(urlLien);

    var ligneDetails = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre);
    divLien.appendChild(ligneDetails);

 contenu.appendChild(divLien);

    return divLien;
}

document.getElementById("ajouterLien").addEventListener("click", function(){
 ajouterLien();
});

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    margin-left: 30px;
    margin-right: 30px;
}

span {
    font-weight: normal;
    font-size: 80%;
}

.lien {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="liensweb.css">
    <title>Activité 2</title>
</head>

<body id="body">
    <h1>Activité 2</h1>

 <button id="ajouterLien">Ajouter un lien</button><br><br>

    <div id="contenu"><br>
    </div>

    <script src="liensweb.js"></script>
</body>

</html>

为什么发送表单后所有页面都被清除？

Why all the page is cleared after sent the form?

javascript

dom-events