每次單擊按鈕時如何創建一個新的div？
[英]How to create a new div each time a button is clicked?
問題描述
這是我的代碼：
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中做到這一點。
2 個解決方案
解決方案1
2 已采納 2018-05-19 04:41:31
在將新值分配給innerHTML時，您可以將舊值附加為
document.getElementById('mentees').innerHTML+='<br >' + document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
解決方案2
1 2018-05-19 04:41:21
div.innerHTML = div.innerHTML + newDiv
要么
div.appendChild(newDiv)
參見參考： https : //www.w3schools.com/jsref/met_node_appendchild.asp
jQuery-如何在每次按下按鈕時創建一個新的可拖動div
[英]JQuery - How to create a new draggable div each time a button is pressed
每次單擊按鈕時如何創建新對象並將舊對象存儲在數組中？ OOP JavaScript
[英]How to create new object and store the old in array each time when button clicked? OOP JavaScript
如何創建一個回復按鈕，每次單擊一個按鈕時顯示
[英]How to create a reply button that displays for each button clicked one at a time
我如何讓按鈕生成一個隨機數，每次單擊按鈕時都會生成一個新數字並將其添加到前一個數字上
[英]how do i make a button generate a random number and each time the button is clicked a new number is generated and added to the previous number
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.