每次单击按钮时如何创建一个新的div？答案

【问题标题】：How to create a new div each time a button is clicked?每次单击按钮时如何创建一个新的div？
【发布时间】：2018-10-29 12:19:48
【问题描述】：

这是我的代码：

function newMentee() {
  document.getElementById('new-mentee-form').style.display="block";
  document.getElementById('mentees').style.display="none";
}
function addMentee() {
  document.getElementById('new-mentee-form').style.display="none";
  document.getElementById('mentees').innerHTML=document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
  document.getElementById('mentees').setAttribute("style","display:block;background-color:black;width:10em;height:10em;margin-top:5em;margin-left:2em;padding:2em;border-radius:2em;word-wrap:break-word;");
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
  background-color: #3b4149;
}
header {
  background-color: #181b1e;
  width: 100%;
  height:15em;
}
header h1 {
  color:white;
  text-align: center;
  line-height: 5em;
  font-size: 3em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: block;
  float:left;
  width: 25%;
  text-align: center;
  line-height: 2.5em;
  color:white;
  background-color: #1376d8;
}
ul li ul li {
  display: none;
}
ul li:hover {
  background-color: #18e288;
  opacity: 0.7;
}
ul li:hover ul li {
  display: block;
  width:100%;
}
#new-mentee-form {
  padding-top: 3em;
  color:white;
  background-color: black;
  width:20em;
  height:30em;
  margin-top: 3em;
  border-radius: 2em;
  display: none;
}
input,textarea {
  padding: 0.5em;
  color:white;
}
#submit {
  border-radius: 2em;
}
#submit:hover {
  background-color: #18e288;
}
textarea {
  resize:none;
}
#mentees {
  color:white;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="delta.css">
    <script type="text/javascript" src="delta.js">
    </script>
  </head>
  <body>
    <header>
      <h1>Mentee List</h1>
    </header>
    <nav>
      <ul>
        <li>List of Mentees</li>
        <li onclick="newMentee();">Add a mentee</li>
        <li>Remove a mentee</li>
        <li>Make an edit
          <ul>
            <li>Add Details</li>
            <li>Remove Details</li>
          </ul>
        </li>
      </ul>
    </nav>
    <div id="mentees">
    </div>
    <center>
    <div>
      <div id="new-mentee-form">
        Name:<br><br><input type="text" name="name" id="name"><br><br>
        Rating:<br><br><input type="text" id="rating" value=""><br><br>
        Comments:<br><br><textarea name="name" rows="8" cols="28" id="comments" maxlength="30"></textarea><br><br>
        <input type="submit" name="submit" value="Submit" id="submit" onclick="addMentee();">
      </div>
    </div>
  </center>
  </body>
</html>

我的目标是创建一个新的 div（这将像卡片一样显示），每次单击导航栏中的“添加受指导者”时用户输入的所有详细信息。我不想将数据存储在外部文件中。有什么办法可以从innerHTML 中检索以前的数据并将一个新的div 添加到innerHTML 的现有内容中？我面临的问题是每次单击“添加受指导者”时，以前的数据都会被清除。我想在 VanillaJS 中做到这一点。

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

在为 innerHTML 分配新值时，您可以将旧值附加为

document.getElementById('mentees').innerHTML+='<br >' + document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;

【讨论】：

这比预期的要容易得多。现在看来是一个非常愚蠢的问题。

【解决方案2】：

div.innerHTML = div.innerHTML + newDiv

或者

div.appendChild(newDiv)

参见参考： https://www.w3schools.com/jsref/met_node_appendchild.asp

【讨论】：