JS动态添加HTML布局

html:

 <tab-pane :label="lab1" name="name0">
        <div class="t1">
        <i-table :columns="columns3":data="data3"> </i-table>
        <page class="page2" show-elevator :total="count1" :current="current_num1" 
        placement="top" @on-change="numChange1" 
        show-sizer :page-size="pageSize1" @on-page-size-change="pageSizeChange1"></page>
        </div>
        <div class="c1" id="c0">
        </div>
         </tab-pane>

想要在 class="c1"的div层里面动态添加图片和详细信息,有多少条数据就添加多少个;

js:

     // 动态创建
        dynamicCreated: function(val) {
          var div = document.getElementById(this.yy);
          div.innerHTML="";
          if (val.length != 0) {
            // 获取div
            for (let i = 0; i < val.length; i++) {
              var img = document.createElement("img");
              var div1=document.createElement("div");
              img.src =
                "http://XXXX" +
                val[i].emp_no +
                "XXXXX";
              img.style.marginLeft = "10px";
              img.style.height = "130px";
              img.style.width = "100px";

              let no = val[i].emp_no;
              let name = val[i].emp_name;
              var p=document.createElement("p");
              var p1=document.createElement("p");
              p.width="130px";
              p1.width="130px";
              p.slot="title";
              p1.slot="title";
              p.innerHTML="工號:"+no;
              p1.innerHTML="姓名:"+name;
              p.style.textAlign="center";
              p1.style.textAlign="center";
              div1.style.width="130px";
              div1.appendChild(img);
              div1.appendChild(p);
              div1.appendChild(p1);
              div1.style.display="inline-block";
              div.appendChild(div1);
            }  
           } else {
              var text = document.createElement("text");
              text.innerHTML = "<strong>暫無數據</strong";
              text.style.fontSize="14px";
              div.appendChild(text);
            }               
        },     

运行结果图: