如何以列表格式存储和显示表单的值答案

【问题标题】：How to stock and display in a list format a form's value如何以列表格式存储和显示表单的值
【发布时间】：2017-10-15 19:49:01
【问题描述】：

我希望将表单中输入的每个值都储存起来，并以列表格式<li>显示。

例如：如果有人在表单中输入“Thomas”，它将显示
.托马斯
然后，输入“Sophia”，显示：
.托马斯
.索菲亚
等等……

最好的方法是什么？这是我的 HTML 代码。

<input id="prenom" type="text">
<input id="bouton" type="button" value="récuperer">
<p id="message"></p>

和javascript

let prenom = document.getElementById("prenom");
let bouton = document.getElementById("bouton");
let message = document.getElementById("message");
function stocker(){
let valeur = prenom.value;
console.log(valeur);
 prenom.value = "";
  message.innerHTML += " "+valeur;
 }
bouton.addEventListener("click",stocker);

【问题讨论】：

您的意思是存储 - 就像在 localStorage 中一样。什么时候做？也请点击<> 并创建一个minimal reproducible example
哦！你想让它们垂直对齐！？
是的一个垂直列表:)
试试新答案 :)

标签： javascript forms list addeventlistener stock

【解决方案1】：

它似乎对我有用，试试吧。也许你需要更详细地描述你想要完成的事情让我理解:)

let prenom = document.getElementById("prenom");
let bouton = document.getElementById("bouton");
let messageParent = document.getElementById("parent");
function stocker(){
let valeur = prenom.value;
  console.log(valeur);
  //prenom.value = "";
  //message.innerHTML += " "+valeur;
  var p = document.createElement("p");
  p.innerHTML = valeur;
  messageParent.append(p); 
}
bouton.addEventListener("click",stocker);

<input id="prenom" type="text">
<input id="bouton" type="button" value="récuperer">
<div id="parent">
  <p id="message"></p>
<div>

【讨论】：

这不是答案，而是评论
按下按钮后就可以了