javascript - 如何在 JavaScript 中使用 appendChild() 将一个 div 容器附加到另一个 div 容器?
问题描述
我设计了一个简单的 HTML 表单。我试图通过在 JavaScript 中获取用户输入的数据,在同一页面上动态显示卡片信息。我在调用我创建的要在按下提交按钮时调用的函数时遇到问题。该函数第一次被正确调用,但是一旦用户输入第二个信息并单击“提交”按钮,该函数就会被调用并且它与第一张卡重叠......任何帮助将不胜感激。
这是HTML:
<form action="" id="enrol">
<div class="container">
<h1>Enrol</h1>
<p>Please fill in this form to get enrolled.</p> <hr />
<label for="name"><b>Name</b></label>
<input id="name" type="text" placeholder="Enter Name" name="name" required>
<label for="img"><b>Image</b></label>
<input type="file" id="img" name="image" required/>
<label for="dsc"><b>Description</b></label>
<input id="dsc" type="text" placeholder="Describe yourself in a few lines" name="dsc" required>
<button id="btn" type="button" class="registerbtn" onclick="showCard(); reset();">Submit</button> <hr/>
</div>
</form>
这是JavaScript:
//Showing Card
function showCard() {
//get values
var name, desc, pic;
name = document.getElementById("name").value;
desc = document.getElementById("dsc").value;
pic = document.getElementById("img").files[0].name;
//create image object
var img = document.createElement("IMG");
img.setAttribute("width", "auto");
img.setAttribute("height", "125");
img.setAttribute("src", "img/" + pic);
//create layout
var mainDiv = document.createElement("div");
mainDiv.id = "main";
mainDiv.className = "container";
document.body.appendChild(mainDiv);
var div = document.createElement("div");
div.id = "row";
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement("div");
div2.id = "class";
div2.className = "col-lg-6 col-md-6 col-sm-12 col-xs-12";
div2.innerHTML = "<label><b>Member # 1</b></label> <i>(Your card will look like this)</i>" + "<br />" + "<br />";
document.getElementById("row").appendChild(div2);
var div3 = document.createElement("div");
div3.id = "card";
div3.className = "card";
document.getElementById("class").appendChild(div3);
var div4 = document.createElement("div");
div4.id = "cardBody";
div4.className = "cardBody";
document.getElementById("card").appendChild(div4);
var div5 = document.createElement("div");
div5.id = "row1";
div5.className = "row";
document.getElementById("cardBody").appendChild(div5);
var div6 = document.createElement("div");
div6.id = "class";
div6.className = "col-lg-6 col-md-6 col-sm-12 col-xs-12";
div6.appendChild(img);
document.getElementById("row1").appendChild(div6);
var div7 = document.createElement("div");
div7.id = "class1";
div7.className = "col-lg-6 col-md-6 col-sm-12 col-xs-12";
div7.innerHTML = "<h4><b>" + name + "</b></h4>" + "<p>" + desc + "</p>";
document.getElementById("row1").appendChild(div7);
var button = document.createElement("button");
button.className = "btn-success";
button.innerHTML = "View Details";
document.getElementById("class1").appendChild(button);
}
解决方案
问题是您的代码仍在引用第一张卡中的 div。因此,任何新卡都将附加到旧卡上。为此,您可以在此处添加一个全局计数器并为 div 动态添加 ID。然后将为新的 div 添加新卡,如下所示:
var counter= 0;
function showCard() {
counter++;
//get values
var name, desc, pic;
name = document.getElementById("name").value;
desc = document.getElementById("dsc").value;
pic = document.getElementById("img").files[0].name;
//create image object
var img = document.createElement("IMG");
img.setAttribute("width", "auto");
img.setAttribute("height", "125");
img.setAttribute("src", "img/" + pic);
//create layout
var mainDiv = document.createElement("div");
mainDiv.id = "main"+ counter;
mainDiv.className = "container";
document.body.appendChild(mainDiv);
var div = document.createElement("div");
div.id = "row"+ counter;
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement("div");
div2.id = "class"+ counter;
div2.className = "col-lg-6 col-md-6 col-sm-12 col-xs-12";
div2.innerHTML = "<label><b>Member # 1</b></label> <i>(Your card will look like this)</i>" + "<br />" + "<br />";
document.getElementById("row").appendChild(div2);
var div3 = document.createElement("div");
div3.id = "card"+ counter;
div3.className = "card";
document.getElementById("class").appendChild(div3);
var div4 = document.createElement("div");
div4.id = "cardBody"+ counter;
div4.className = "cardBody";
document.getElementById("card").appendChild(div4);
var div5 = document.createElement("div");
div5.id = "row1"+ counter;
div5.className = "row";
document.getElementById("cardBody").appendChild(div5);
var div6 = document.createElement("div");
div6.id = "class"+ counter;
div6.className = "col-lg-6 col-md-6 col-sm-12 col-xs-12";
div6.appendChild(img);
document.getElementById("row1").appendChild(div6);
var div7 = document.createElement("div");
div7.id = "class1"+ counter;
div7.className = "col-lg-6 col-md-6 col-sm-12 col-xs-12";
div7.innerHTML = "<h4><b>" + name + "</b></h4>" + "<p>" + desc + "</p>";
document.getElementById("row1").appendChild(div7);
var button = document.createElement("button");
button.className = "btn-success";
button.innerHTML = "View Details";
document.getElementById("class1").appendChild(button);
}
推荐阅读
- ios - 使用 SnapShotListener 从 FirebaseFirestore 读取数据后如何刷新我的 UITableView?
- sql - SQL 查询 + 如何回顾特定日期
- powershell - Powershell:无法将“System.Collections.Hashtable”类型的“System.Collections.Hashtable”值转换为“System.Uri”类型
- java - 具有任意标签长度的 AES-GCM
- python - 是否可以对这个 numpy 数组比较进行矢量化?
- c++ - 在重载的 operator() 上指定模板参数
- ios - 在 SwiftUI 中创建具有特定日期的 DatePicker
- javascript - Javascript 适用于 1 个网络主机,但不适用于另一个
- python - tkinter Checkbutton 未按预期工作
- dynamics-crm - WebView 2 导致应用程序崩溃