如何在 JavaScript 中使用 appendChild() 将一个 div 容器附加到另一个 div 容器？

Question

我设计了一个简单的 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);

}

Answer 1

问题是您的代码仍在引用第一张卡中的 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);

}