数据渲染-----渲染表格渲染表格--------创建元素并且渲染页面 1、创建空标签 2、设置必要的属性或事件 3、创

创建元素并且渲染页面

1、创建空标签

var elem=document.createElement("标签名");

2、设置必要的属性或事件

elem.属性名="属性值";
elem.on事件名=function(){函数体} - 事件都可以在创建时提前绑定上

3、创建好的元素渲染到DOM树上

父元素.appendChild(elem);

$举例数据渲染$

注意 : $渲染的时候,先创建在一块渲染放到DOM树上,减少浏览器加载负担$

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格数据渲染</title>
  <style>
    * {
      margin: 0;
    }

    table {
      width: 900px;
      margin: 0px auto;
      border-collapse: collapse;
    }

    td {
      border: 1px solid #000;

    }
  </style>
</head>

<body>

  <script>
    var str = '唐僧%法师%50#孙悟空%刺客%30#猪八戒%边坦%70#达摩%战士%40#女娲%法师%25';
    var body = document.getElementsByTagName('body')[0];
    var table = document.createElement('table');
    var people = str.split('#');
    // console.log(people);
    var arr = ['角色姓名', '职业位置', '生命值'];
    var tr = document.createElement('tr');
    for (var i = 0; i < arr.length; i++) {
      // var tr = document.createElement('tr');
      var td = document.createElement('td');
      td.innerHTML = arr[i];
      // console.log(arr[i]);
      tr.appendChild(td);
      // console.log(tr.appendChild(td));
    }
    table.appendChild(tr);

    for (var i = 0; i < people.length; i++) {
      // console.log(people[i]);
      var tr = document.createElement('tr');
      // tr.innerHTML = people[i];
      // var prative = tr.innerHTML.split('%');

      var prative = people[i].split('%');
      // console.log(people[i]);
      // console.log(prative);

      for (var j = 0; j < prative.length; j++) {
        var td = document.createElement('td');
        td.innerHTML = prative[j];
        tr.appendChild(td);
        // console.log(td.innerHTML);
        // console.log(tr.appendChild(td));
      }
      table.appendChild(tr);
      // console.log(table.appendChild(tr));
    }
    // tr.appendChild(td);

    body.appendChild(table);
  </script>
</body>

</html>