Как создать новый div каждый раз, когда нажимается кнопка? - PullRequest
Новая
       8

Как создать новый div каждый раз, когда нажимается кнопка?

0 голосов
/ 19 мая 2018

Это мой код: 

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 (он будет отображаться как карточка) со всеми деталями, вводимыми пользователем каждый раз "ДобавитьMentee »в навигационной панели нажата.Я не хочу хранить данные во внешнем файле.Есть ли способ извлечь предыдущие данные из innerHTML и добавить новый div к существующему содержимому innerHTML?Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда нажимается «Добавить Mentee», предыдущие данные стираются.Я хочу сделать это в VanillaJS.

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

при назначении нового значения innerHTML, вы можете добавить его со старым значением как 

document.getElementById('mentees').innerHTML+='<br >' + document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
0 голосов
/ 19 мая 2018

div.innerHTML = div.innerHTML + newDiv

Или

div.appendChild(newDiv)

См. Ссылку: https://www.w3schools.com/jsref/met_node_appendchild.asp

...