动态列表渲染

HTML/CSS/JavaScript 解法, 执行用时: 1687ms, 内存消耗: 77868KB, 提交时间: 2022-02-09

{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n    </head>\n    <body>\n        <ul></ul>\n\n        <script>\n            var people = [\n                { name: '牛油1号', id: 1, age: 20 },\n                { name: '牛油2号', id: 2, age: 21 },\n                { name: '牛油3号', id: 3, age: 19 },\n            ]\n            var ul = document.querySelector('ul');\n            // 补全代码\n        let liStr = '';\n        people.forEach(v => {\n        liStr = liStr + '<li>' + v.name + ' ' + v.age + '岁'+'</li>';\n        })\n        ul.innerHTML = liStr\n            \n        </script>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1689ms, 内存消耗: 77852KB, 提交时间: 2022-02-10

{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n    </head>\n    <body>\n        <ul></ul>\n\n        <script>\n            var people = [\n                { name: '牛油1号', id: 1, age: 20 },\n                { name: '牛油2号', id: 2, age: 21 },\n                { name: '牛油3号', id: 3, age: 19 },\n            ]\n            var ul = document.querySelector('ul');\n            // 补全代码\n            let fragment = document.createDocumentFragment();\n            people.map(item => {\n                let li = document.createElement('li');\n                li.innerText = `${item.name} ${item.age}`;\n                fragment.appendChild(li);\n            })\n            ul.appendChild(fragment);\n            \n        </script>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1692ms, 内存消耗: 77836KB, 提交时间: 2022-02-09

{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n    </head>\n    <body>\n        <ul></ul>\n\n        <script>\n            var people = [\n                { name: '牛油1号', id: 1, age: 20 },\n                { name: '牛油2号', id: 2, age: 21 },\n                { name: '牛油3号', id: 3, age: 19 },\n            ]\n            var ul = document.querySelector('ul');\n            // 补全代码\n            var str  = '';\n            people.forEach(ele =>{\n                str += `<li>${ele.name} ${ele.age}岁</li>`\n            })\n            ul.innerHTML = str;\n            \n        </script>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1699ms, 内存消耗: 77840KB, 提交时间: 2022-02-10

{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n    </head>\n    <body>\n        <ul></ul>\n\n        <script>\n            var people = [\n                { name: '牛油1号', id: 1, age: 20 },\n                { name: '牛油2号', id: 2, age: 21 },\n                { name: '牛油3号', id: 3, age: 19 },\n            ]\n            var ul = document.querySelector('ul');\n            // 补全代码\n              let str = ''\n        people.map(e=>{\n            return str+=`<li>${e.name}${e.age}岁</li><br />`\n        })\n        console.log(str);\n        ul.innerHTML=str\n        </script>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1755ms, 内存消耗: 77900KB, 提交时间: 2022-01-25

{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n    </head>\n    <body>\n        <ul></ul>\n\n        <script>\n            var people = [\n                { name: '牛油1号', id: 1, age: 20 },\n                { name: '牛油2号', id: 2, age: 21 },\n                { name: '牛油3号', id: 3, age: 19 },\n            ]\n            var ul = document.querySelector('ul');\n            // 补全代码\n            people.map((item) => {\n               ul.innerHTML += `<li>${item.name} ${item.age}岁</li>`\n           });\n        </script>\n    </body>\n</html>","libs":[]}

详情