JS中创建10个a标签，点击弹出对应的序号

JavaScript020

JS中创建10个a标签，点击弹出对应的序号,第1张

解题：

for (let i = 1i <= 10i++) {

        let a = document.createElement('a')

        a.innerHTML = i + '<br>'

        document.body.appendChild(a)

        a.addEventListener('click', function(e) {

            e.preventDefault()

            alert(i)

        })

    }

如图：

结题思路

1、创建10个a标签，肯定是先创建一个a标签，通过通过循环的方式，将数字1-10 赋值给a

2、点击a,弹出数字

难点：

i的值，如果是全局作用域下的i,那么每次弹出的都是循环的最后一个i

所以i的值，必须是快级作用域下的i 正好用es6中的let 来声明变量i

需要用document.createElement创建出来a标签。

<body>

<div style="width:100px height:100px border:1px solid #ccc">    

</div>

</body>

<script>

var oDiv = document.getElementsByTagName('div')[0]

var oA = document.createElement('a')   //创建a标签

oA.href = '#'    //增加a标签的href属性

oA.innerHTML = '11111111'   //给a标签添加内容

oDiv.appendChild(oA)  //将a标签添加到div里面

</script>

</html>

先新建<li></li>，在新建<a></a>,把a标签appendChild()进li就可以了

var oLi=document.createElement('li')//创建li标签

var oA=document.createElement('a')//创建a标签

oLi.appendChild(oA)//将a标签插入到li标签里面