动态生成元素并获取

博客 
1
2
3
<div id="container" class="container">
        
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
window.onload = function(){
        function test1(){
            var container = document.getElementById('container');
            var html = "";
            for(var i = 0;i < 5;i++){
                html = '<div id="div'+i+'">'+i+'</div>'
                container.innerHTML += html;
            }
        }

        function test2(){
            for(var i = 0;i < 5;i++){
                var div = document.getElementById('div'+i);
                console.log(div);//<div id="0"></div>  --  <div id="4"></div>
            }
        }

        test1()
        test2()
    }
</script>

通过test1()往container中插入五个div层，再通过test2()获取到这些div，此场景适用于动态插入多个同类型的div，并对这些div进行操作。比如，选择多张图片，每个div都是一个图片预览加上传的层，通过test2()对每个上传的层进行操作。