每次单击按钮时如何创建一个新的div？
Posted
技术标签:
【中文标题】每次单击按钮时如何创建一个新的div？【英文标题】：How to create a new div each time a button is clicked? 【发布时间】：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 中做到这一点。
【问题讨论】：
【参考方案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
【讨论】：
以上是关于每次单击按钮时如何创建一个新的div？的主要内容，如果未能解决你的问题，请参考以下文章