javascript - 如何将 div 实例包装在盒子内

Question

我是 JavaScript 新手，所以如果我没有很好地解释我想要什么，请耐心等待。所以基本上我有一个用于创建事件的表单，因此每当用户填写字段并点击保存时，它都会创建一个包含信息的 div 实例。现在这些信息基本上只是在行中，我想将它们组织在一个盒子(div)内，但我不知道如何创建它，是使用JS还是HTMl？

这是我现在正在工作的图片。

这是代码的 View 。

window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
  buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
  document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}

var obj = {nameact: "", when: "", where: "",desc:""};

document.forms[1].onchange = function(e) {
 obj[e.target.name] = e.target.value;
 }

document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}

<section id="cd-placeholder-2" class="cd-section cd-container">
        <h2>Activities</h2>     
        <div id="Slider" class="slide-up">
            <div>
                <div class="contents" >


        <form class="form2">

                      <div class="col-3">
                        <label>
                          Activity Name
                          <input placeholder="What is your activity?" tabindex="3" name="nameact" />
                        </label>
                      </div>

                      <div class="col-3">
                        <label>
                          Where?
                          <input placeholder="Where is it going to be?" tabindex="4" name="when" />
                        </label>
                      </div>

                      <div class="col-3">
                        <label>
                          When?
                          <input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
                        </label>
                      </div>

                      <div>
                        <label>
                          Care to share more?
                          <textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
                        </label>
                      </div>

                        <button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>


        </form>

                    <div id="name"></div>

                </div>
            </div>
        </div>

    </section>

我们非常感谢任何反馈。

Answer 1

你需要HTML+CSS+JS

HTML:

<div id="name"></div>

CSS

.row{
    background-color: red;
    border: 5px solid #333;
    display: block;
    position: relative;
    overflow: hidden;
}
.nameact{
    background-color:red;
    height: 40px;
    display: inline-block;
}
.whereisit{
    background-color:green;
    height: 40px;
    display: inline-block;
}
.when{
    background-color:blue;
    height: 40px;
    display: inline-block;
 }
.describtion{
    background-color:brown;
    height: 40px;
    display: inline-block;
}

JS

var obj = {nameact: "", when: "", where: "",desc:""};

document.forms[1].onchange = function(e) {
 obj[e.target.name] = e.target.value;
 }

document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}

function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';

document.getElementById('name').innerHTML += myhtml;

}

您需要根据需要更新 CSS 代码