在div中动态创建表

Question

我正在尝试动态地在div中创建一个表。

如果我使用document.body.appendChild(table);进行尝试，则可行。但在我的代码中，我想在div中使用id创建表格。

这是我的代码。怎么了？非常感谢。

  control = '<li style="width:100%;">' +
      '<div class="msj-rta macro2">' +
      '<div class="text text-r">' +
      '<p>' + text + '</p>' +
      '<p><div id="tablez"></div></p>' +
      '<p><small>' + date + '</small></p>' +
      '</div>' +
      '<div class="avatar" style="padding:0px 0px 0px 10px !important"><img class="img-circle" style="width:30%;" src="' + you.avatar + '" /></div>' +
      '</li>';

  var table = document.createElement('table');
  for (var i = 1; i < 4; i++) {
      var tr = document.createElement('tr');

      var td1 = document.createElement('td');
      var td2 = document.createElement('td');

      var text1 = document.createTextNode('Text1');
      var text2 = document.createTextNode('Text2');

      td1.appendChild(text1);
      td2.appendChild(text2);
      tr.appendChild(td1);
      tr.appendChild(td2);

      table.appendChild(tr);
  }
  document.getElementById("tablez").innerHTML = table;

  }

Answer 1

使用setAttribute()设置ID

var table = document.createElement('table');
table.setAttribute("id", "foo");

Answer 2

问题出在以下一行

  

document.getElementById（＆＃34; tablez＆＃34;）。innerHTML = table;

table是DOMElement，不是String。 .innerHTML仅适用于将html设置为字符串。

在你的情况下，你必须做

document.getElementById("tablez").appendChild(table);

Answer 3

您不使用innerHTML添加DOM元素。请改用appendChild：

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
  var tr = document.createElement('tr');   

  var td1 = document.createElement('td');
  var td2 = document.createElement('td');

  var text1 = document.createTextNode('Text1');
  var text2 = document.createTextNode('Text2');

  td1.appendChild(text1);
  td2.appendChild(text2);
  tr.appendChild(td1);
  tr.appendChild(td2);

  table.appendChild(tr);
}
document.getElementById("tablez").appendChild(table);

<div id="tablez"></div>

或者通过这样做来减少代码量：

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
  var tr = document.createElement('tr');   

  var td1 = document.createElement('td');
  var td2 = document.createElement('td');

  td1.textContent = "Text1";;
  td2.textContent = "Text2";;
  tr.appendChild(td1);
  tr.appendChild(td2);

  table.appendChild(tr);
}
document.getElementById("tablez").appendChild(table);

<div id="tablez"></div>

Answer 4

此演示使用 Template Literals 来构建字符串，使用 insertAdjacentHTML() 来插入字符串。

演示

/* Array of 3 Objects 
|| Each Obj has 3 properties
*/
var users = [{
  name: 'zer00ne',
  date: new Date(1380069144000),
  avatar: 'https://avatars0.githubusercontent.com/u/3816139?s=400&v=4'
}, {
  name: 'Kaiser Soze',
  date: new Date(1356768914400),
  avatar: 'https://i.pinimg.com/originals/5a/36/3d/5a363df74d80bdfa6aac0659303d675a.jpg'
}, {
  name: 'John Wick',
  date: new Date(1381588244000),
  avatar: 'https://cdn1.thr.com/sites/default/files/imagecache/nfe_square_383x383/2016/10/johnwick2_0.jpg'
}];

// Declare/Define some variables outside of loop
var i = 0;
var qty = users.length;
var rows = "";
var user;

// Each loop, user is built with Template Literals
for (i; i < qty; i++) {
  user = users[i];
  rows = `<tr><td>Text ${i}A</td><td>Text ${i}B</td></tr>
          <tr><td>Text ${i}C</td><td>Text ${i}D</td></tr>   
          <tr><td>Text ${i}E</td><td>Text ${i}F</td></tr>`;

  user = `<li>
       <div style='font-size:20px'>${user.name}</div>
       <table>
         ${rows}
        </table>
        <div><small> ${user.date} </small></div>
      <figure class="avatar" style="padding:0px 0px 0px 10px">
        <img class="img-circle" style="width:30%;" src=" ${user.avatar}" />
      </figure>
      </li>`;

  /* Unlike innerHTML, insertAdjacentHTML doesn't overwrite
  || content. It will insert strings:
  - in front of an element.........: "beforebegin"
  - inside an element as 1st child.: "afterbegin"
  - inside an element as last child: "beforeend"
  - behind an element..............: "afterend"
  */
  document.getElementById('list').insertAdjacentHTML('beforeend', user);
}

<ol id='list'></ol>