<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
</ul>
</body>
<script>
var data = [
{
title:'马方确认留尼汪岛飞机残骸来自波音777',
href:'http://world.huanqiu.com/exclusive/2015-08/7167955.html',
child:[
{
title:'疑似“飞机舱门”实为梯子',
href:'http://news.cnr.cn/gjxw/gnews/20150803/t20150803_519399542.shtml'
},
{
title:'全球仅MH370一架波音777失联',
href:'http://focus.china.com.cn/s/guoji/2015/08/03/356535.html'
}
]
},
{
title:'马方确认留尼汪岛飞机残骸来自波音777',
href:'http://world.huanqiu.com/exclusive/2015-08/7167955.html',
child:[
{
title:'疑似“飞机舱门”实为梯子',
href:'http://news.cnr.cn/gjxw/gnews/20150803/t20150803_519399542.shtml'
},
{
title:'全球仅MH370一架波音777失联',
href:'http://focus.china.com.cn/s/guoji/2015/08/03/356535.html'
}
]
},
{
title:'马方确认留尼汪岛飞机残骸来自波音777',
href:'http://world.huanqiu.com/exclusive/2015-08/7167955.html',
child:[
{
title:'疑似“飞机舱门”实为梯子',
href:'http://news.cnr.cn/gjxw/gnews/20150803/t20150803_519399542.shtml'
},
{
title:'全球仅MH370一架波音777失联',
href:'http://focus.china.com.cn/s/guoji/2015/08/03/356535.html'
}
]
}
];
window.οnlοad=function(){
//TODO 获取ul无序列表.
var oUl=document.body.children[0];
for(var i=0;i<data.length;i++){
var oLi=document.createElement('li'); //TODO 创建元素li。
var oH=document.createElement('h2'); //TODO 创建h2标题标签.
//TODO 为h2添加a标签以及内容 为: data中的href与title.
oH.innerHTML=`<a href="${data[i].href}">${data[i].title}</a>`;
oLi.appendChild(oH); //TODO 将h1添加至li中.
for(var j=0;j<data[i].child.length;j++){
var oA=document.createElement("a"); //TODO 创建a标签
//TODO 设置oA的链接为 data的子级中的href.
oA.href=data[i].child[j].href;
//TODO 设置oA的内容为 data的子级中的title.
oA.innerHTML=data[i].child[j].title;
oLi.appendChild(oA);//TODO 将oA添加至li中.
}
oUl.appendChild(oLi)
}
}
</script>
</html>
数据渲染
最新推荐文章于 2024-04-14 15:00:58 发布