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

解题：

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,d出数字

难点：

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

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

<meta http-equiv="Content-Type" content="text/html charset=utf-8">

<script>

function addNumber() {

    var t = document.getElementById("ta"), s = t.value.split("\n"), len = s.length

    for (var i = 1 i <= len i++) {

        if ("" != s[i - 1]) {

            s[i - 1] = i + "." + s[i - 1]

        }

    }

    t.value = s.join("\n")

}

</script>

<textarea id="ta" cols="30" rows="4"></textarea>

<input value="添加序号" type="button" onClick="addNumber()">

做的比较简单，粗糙，你先看看能不能满足你的基本需求

1、利用js代码首先创建一个div，document.createElement('div')

2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。

3、确定位置之后，显示div即可。

示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

方法：

function createDiv(){

//首先创建div

var descDiv = document.createElement('div')

document.body.appendChild(descDiv)

//获取输入框dom元素

var text = document.getElementById('city')

//计算div的确切位置

var seatX = text.offsetLeft + text.offsetWidth//横坐标

var seatY = text.offsetTop + text.offsetHeight//纵坐标

//给div设置样式，比如大小、位置

var cssStr = "z-index:5width:420pxheight:300pxbackground-color:#FFFF99border:1px solid blackposition:absoluteleft:"

+ seatX + 'pxtop:' + seatY + 'px'

//将样式添加到div上，显示div

descDiv.style.cssText = cssStr

descDiv.innerHTML = '这是一个测试的div显示的内容'

descDiv.id = 'descDiv'

descDiv.style.display = 'block'

}

---