怎样用js插入多张图片

JavaScript016

怎样用js插入多张图片,第1张

var arrImgs={"url1","url2","url3",...}图片地址存在数组中

var html=''

//遍历数组插入img标签到页面

for(var i=0i<arrImgs.lengthi++){

    html+='<img src="'+arrImgs[i]+'" />'//创建img标签，图片地址赋值src

}

document.getElementById("要插入的容器id").innerHtml=html

方法/步骤分步阅读1/7新建一个html文件，命名为test.html，用于讲解怎样用js插入多张图片的页面中。2/7在test.html文件内，使用div创建一个图片输出的区域，并设置div的id属性为pic，主要用于下面使用js获得该div对象。3/7在test.html文件内，使用css设置div的图片样式，设置图片的宽度为200px，高度为100px。4/7在test.html文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行add()函数。5/7在test.html文件内，在js标签内，创建add()函数，在函数内创建一个图片路径的数组。6/7在add()函数内，使用for循环遍历arr数组，将图片路径逐个插入img标签的src属性内，并将所有img标签连接成一个字符，最后，通过getElementById()方法获得div对象，将多个img标签的html插入div内。7/7在浏览器中打开test.html文件，点击按钮，查看实现的效果。