为什么发送表单后页面全部清空？答案

【问题标题】：Why all the page is cleared after sent the form?为什么发送表单后页面全部清空？
【发布时间】：2016-06-20 18:00:34
【问题描述】：

为什么发送表单后我的页面全部清空？

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

【问题讨论】：

【解决方案1】：

问题是，具有提交类型输入字段的表单的默认行为是进行完整的发布。为了将元素插入到 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>

【讨论】：

【解决方案2】：

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

【讨论】：

不是那个，抱歉