用javascript创建ul>li>a

<divid="test"></div>在test这个div中用js写入:<ul><li><ahref="####"id="aaa">a</a></li><li><ahr... <div id="test"></div>

在test这个div中用js写入:

<ul> <li><a href="####" id="aaa">a</a></li> <li><a href="####" id="bbb">b</a></li></ul>

我自己用createElement、setAttribute、appendChild之类的弄了半天实在弄不出来,要求要:
原生JS,不能用JQ或其它框架用
不能用innerHTML写入,用DOM插入节点
链接要写入id="aaa"和"bbb"
展开
 我来答
whenevery00
2014-03-04 · TA获得超过430个赞
知道小有建树答主
回答量:174
采纳率:100%
帮助的人:237万
展开全部
<div id="test"></div>
<script>
var ul = document.createElement('ul');
var ids = ['aaa','bbb'];//id数组
var hrefs = ['#a','#b'];//链接数组
var vals = ['a','b'];//显示内容数组
for(var i=0;i<2;i++){
var li = document.createElement('li');
var a = document.createElement('a');
a.setAttribute('href',hrefs[i]);
a.id = ids[i];
a.innerHTML = vals[i];
li.appendChild(a);
ul.appendChild(li);
}
test.appendChild(ul);//test 和 document.getElementById('test') 在这里是一样的 浏览器通用 看自己习惯
</script>
追问
请问一下设置id的时候,为什么不是:
a.setAttribute('id',ids[i]);
而是用的:
a.id = ids[i];

这是前面用了:a.setAttribute('href',hrefs[i]); 以后,后面可以省略的缩写写法么?
追答
其实 a.href = hrefs[i];也可以
a.属性 这种是一些标准属性才能用
而setAttribute 是用于所有属性

a.xx写着简单
a.href 的取值是绝对路径
a.getAttribute('href')是相对路径 这个要注意
yugi111
2014-03-04 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>test</title>
<script>
window.onload = function() {
    var _div = document.getElementById("test");
    var _ul = document.createElement("ul");
    var _li1 = document.createElement("li");
var _a1 = document.createElement("a");
_a1.id = "aaa";
_a1.href = "####";
_a1.innerText = "a";
var _li2 = document.createElement("li");
var _a2 = document.createElement("a");
_a2.id = "bbb";
_a2.href = "####";
_a2.innerText = "b";
_li1.appendChild(_a1);
_li2.appendChild(_a2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
_div.appendChild(_ul);
};
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
更多追问追答
追问
感谢,另一个朋友那个数组方式看上去代码更好读一点,分只能给一个人,抱歉了。再次感谢。
追答

不就是个for循环么,我还可以用while呢

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式