フォームが送信された後、すべてのページが消去されるのはなぜですか？

Question

フォームが送信された後、私のすべてのページがクリアされるのはなぜですか？

マイコード： http://jsbin.com/belikusate/edit?html,js,output

は、「ボタン」にあなたの

Answer 1

変更submit.typeに感謝の代わりに、

Answer 2

「を提出する」事は​​、入力フィールドを持つフォームのデフォルトの動作です型送信の完全な投稿を行うことです。デフォルトの動作をDIVに要素を挿入しないようにするためには、単に、次のコードをチェックし、それがあなたの望ましい結果だかどうかを確認してください。この

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

    creerElementLien(test); 

}); 

にこの

document.getElementById("add").addEventListener("click", function(){ 
    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 = 
 
{ 
 
\t titre: "test", 
 
\t url: "http://url.fr", 
 
\t 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() { 
 
\t 
 
\t var formulaire = document.createElement("form"); 
 
\t formulaire.id = "formulaire"; 
 
\t 
 
\t var nom = document.createElement("input"); 
 
\t nom.placeholder = "Entrez votre nom"; 
 
\t nom.required = "required"; 
 
\t nom.style.marginRight = "20px"; 
 
\t nom.name = "nom"; 
 

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

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

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

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

 
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); 
 

 
\t contenu.appendChild(divLien); 
 

 
    return divLien; 
 
} 
 

 
document.getElementById("ajouterLien").addEventListener("click", function(){ 
 
\t 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> 
 

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

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

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

 
</html>