数据转化为视图——JS

`仰望星空`

已于 2022-04-19 17:06:00 修改

阅读量366

点赞数 1

文章标签： javascript 前端

于 2022-04-19 16:30:05 首次发布

本文链接：https://blog.csdn.net/zk_html/article/details/124276355

版权

一、纯 DOM 法

利用 Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。

语法：

var element = document.createElement(tagName[, options]);

再使用 Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。

语法：

element.appendChild(aChild)

实例代码：

<!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>test</title>
  </head>
  <body>
    <ul id="list"></ul>
    <script>
      var arr = [
        { name: "小明", age: 12, sex: "男" },
        { name: "小红", age: 11, sex: "女" },
        { name: "小强", age: 13, sex: "男" },
      ];

      var list = document.getElementById('list');

      for(var i =0; i< arr.length;i++){
          let oLi = document.createElement('li');
          oLi.innerText = arr[i].name;
          list.appendChild(oLi)
      }

    </script>
  </body>
</html>

二、数组 join 法——本质是字符串

join() 方法

join() 方法将数组作为字符串返回

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)

注释：join() 方法不会改变原始数组

实例代码：

<!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>test</title>
</head>

<body>
    <ul id="list"></ul>
    <script>
        var arr = [
            { name: "小明", age: 12, sex: "男" },
            { name: "小红", age: 11, sex: "女" },
            { name: "小强", age: 13, sex: "男" },
        ];

        var list = document.getElementById('list');  
        // 遍历arr数组，每遍历一项，就以字符串的形式将HTML字符串添加到list中
        for(let i =0; i<= arr.length; i++){
           list.innerHTML += [
           '<li>',
                '<div class="hd">' + arr[i].name + '的信息</div>',
                '<div class="hd">',
                    '<p>姓名' + arr[i].name + '</p>',
                    '<p>年龄' + arr[i].age + '</p>',
                    '<p>性别' + arr[i].sex + '</p>',
                '</div>',
            '</li>',
           ].join('')
        }
    </script>
</body>

</html>

1.innerHTML 和 innerText 区别

innnerHTML 用来获取标签元素或设置标签元素，包含文本和HTML标签。在读取元素的时候，会将文本和HTML标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析HTML标签，只显示文本，而不将标签显示出来。

innerText 用来设置或获取标签内文本内容, 但它去除HTML标签。在读取元素的时候，只会读取文本；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，不会解析HTML标签，也就是说，里面的标签并不是html中的标签，而只是一个文本。

三、ES6 的反引号法

在单引号和双引号中，字符只能在一行上面进行编写；而反引号则能让字符不止在同一行上进行编写。

<!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>test</title>
</head>

<body>
    <ul id="list"></ul>
    <script>
        var arr = [
            { name: "小明", age: 12, sex: "男" },
            { name: "小红", age: 11, sex: "女" },
            { name: "小强", age: 13, sex: "男" },
        ];

        var list = document.getElementById('list');  
        // 遍历arr数组，每遍历一项，就以字符串的形式将HTML字符串添加到list中
        for(let i =0; i<= arr.length; i++){
            list.innerHTML += 
                `<li>
                     <div class="hd">${arr[i].name}的信息</div>
                     <div class="hd">
                         <p>姓名${arr[i].name}</p>
                         <p>年龄${arr[i].age}</p>
                         <p>性别${arr[i].sex}</p>
                     </div>
                 </li>`
        }
    </script>
</body>

</html>