如何在一個盒子內包裝一個div的實例

Question

我是JavaScript新手，如果我沒有解釋我想要的東西，請耐心等待。所以基本上我有一個創建活動的表單，所以每當用戶填充字段並點擊保存時，它將創建一個包含信息的div實例。現在這些信息基本上是一致的，我想組織它們在一個盒子（div）中，但我不知道如何創建它，它使用JS還是HTMl？

下面是我現在正在工作的圖片。

這裏是代碼視圖。

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代碼的基礎上，您的需求

Answer 2

如果您需要任何幫助瞭解這一點，請讓我知道。我寫了幾個CSS樣式，以及它們將應用於的HTML標記。讓你的JavaScript產生這個標記，並做一些關於CSS的閱讀，將其推斷爲一個完整的模塊。

<style> 
    .activity { 
     width: 645px; 
     height: 160px; 
     border: 2px solid #0000ff; 
    } 

    .activity > div { 
     padding: 20px; 
    } 

    .activity .top { 
     display: inline-block; 
     float: left; 
     width: 174px; 
     height: 30; 
     border-right: 1px solid #0000ff; 
    } 

    .activity .top.end { 
     width: 175px; 
     border-right: none; 
    } 

    .activity .bottom { 
     display: inline-block; 
     float: left; 
     width: 605px; 
     height: 50; 
     border-top: 1px solid #0000ff; 
    } 

    .activity .title { 
     display: block; 
    } 


</style> 


<div class="activity"> 
    <div class="top"> 
     <span class="title">ACTIVITY NAME</span> 
     <span>Skydiving</span> 
    </div> 

    <div class="top"> 
     <span class="title">WHERE?</span> 
     <span>Dubai Palm Island</span> 
    </div> 

    <div class="top end"> 
     <span class="title">2017-06-22</span> 
    </div> 

    <div class="bottom"> 
     <span>CARE TO SHARE MORE?</span> 
     <span class="title">It will be a fun trip!</span> 
    </div> 
</div> 

我希望這能讓你朝着正確的方向前進！