html js remove图片,JS操作图片(增,删,改) 例子

Image

{

width:100px;

height:100px;

}

function chuangjian() {

//添加图片

var array = ['1.jpg',

'2.jpg',

'3.jpg',

'4.jpg',

'5.jpg',

'6.jpg',

'7.jpg',

'8.jpg',

'9.jpg',

'10.jpg',

'11.jpg',

'12.jpg',

'13.jpg',

'14.jpg',

'15.jpg'

];

//alert(array.length);

var tablenode = document.createElement('table');

var tbody = document.createElement('tbody');

tablenode.setAttribute('width', '600px');

tablenode.setAttribute('height', '400px');

tablenode.setAttribute('border', '2px');

var count = 0;

for (var i = 0; i < 3; i++) {

var trnode = document.createElement('tr');

for (var j = 0; j < 5; j++) {

var tdnode = document.createElement('td');

var imgnode = document.createElement('img');

imgnode.setAttribute('src', 'picture/' + array[count]);

tdnode.appendChild(imgnode);

trnode.appendChild(tdnode);

count++;

}

tbody.appendChild(trnode);

}

tablenode.appendChild(tbody);

document.body.appendChild(tablenode);

}

//    1.将第2行第4列的图片替换成你自己的图片，不要使用setAttribute

function tihuan() {

var pnode = document.createElement('img');

pnode.setAttribute('src', 'images/2.jpg');

var oldnode = document.getElementsByTagName('img')[8];

oldnode.parentNode.replaceChild(pnode, oldnode);

var oldnode = document.createElement('img');

}

//    2.删除第3行第2列的图片

function shanchu() {

var oldnode = document.getElementsByTagName('img')[11];

oldnode.parentNode.removeChild(oldnode)

}