1.使用传统方式渲染UI结构
代码示例：
<!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>Document</title>
<script src="/js文件/jquery-3.6.0.js"></script>
</head>
<body>
<div id="title"></div>
<div>姓名：<span id="name"></span></div>
<div>年龄：<span id="age"></span></div>
<div>会员：<span id="isVIP"></span></div>
<div>注册时间：<span id="regTime"></span></div>
<div>爱好：
<ul id="hobby">
<li>爱好1</li>
<li>爱好2</li>
<li>爱好3</li>
</ul>
</div>
</body>
<script>
var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
isVIP: true,
regTime: new Date(),
hobby: ['吃饭', '睡觉', '打豆豆']
}
$(function () {
$('#name').html(data.name)
$('#title').html(data.title)
$('#age').html(data.age)
$('#isVIP').html(data.isVIP)
$('#regTime').html(data.regTime)
var row = []
$.each(data.hobby, function (i,item) {
rows.push('<li>'+item+'</li>')
})
$('#hobby').html(rows.join(''))
})
</script>
</html>
