//设置图片大小
img{
width: 150px;
height: 100px;
}
//设置无序列表样式
ul,li{
list-style: none;
}
ul li{
float: left;
margin-right: 10px;
}
<button id="btn1">insert1</button>
<button id="btn2">insert2</button>
<ul id="list">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
var oList=document.getElementById('list');
//追加
document.getElementById('btn1').onclick=function(){
//创建li和img
var oLi=document.createElement('li');
var oImg=document.createElement('img');
oImg.src='images/4.jpg';
//将img插入li中
oLi.appendChild(oImg);
//将li插入到ul中
oList.appendChild(oLi);
};
//指定位置插入
document.getElementById('btn2').onclick=function(){
//创建li和img
var oLi=document.createElement('li');
var oImg=document.createElement('img');
oImg.src='images/5.jpg';
oLi.appendChild(oImg);
var oc=oList.children[2];
//插入
oList.insertBefore(oLi,oc);
};