js 节点操作--创建图片相册（two methds）
方法一：
<style type="text/css">
Image
{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function createimgs() {
var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',
'3615bd55e6db2d3eb2a45a8369653f12(1).jpg',
'3615bd55e6db2d3eb2a45a8369653f12.jpg',
'837adad119910d349f05149ad4a02ef0.jpg',
'849b23dac9ceafe6d7e7b94a73b46e82.jpg',
'91fe451f6e8081fe492c6ae617a50274.jpg',
'9b1b7be8d60eef1e15257797d779d91b.jpg',
'9fce9273034aed88fab0bcfef344dae7.jpg',
'a5f59f9d670a936bf8281090bc2ce7c7.jpg',
'cda8a8f5b72e165c153fd396db02ab64.jpg',
'd159717ab855f729066b333d439f630e.jpg',
'd7ef1897c62640dba44532e6475c49c6.jpg',
'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg',
'f6b31d9bca975794bd23fdf71295e1c4.jpg',
'f856bd37b432eb532098fa170dfbafd4.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', 'images/' + array[count]);
tdnode.appendChild(imgnode);
trnode.appendChild(tdnode);
count++;
}
tbody.appendChild(trnode);
}
tablenode.appendChild(tbody);
document.body.appendChild(tablenode);
}
</script>
</head>
<body>
<input type="button" value="创建相册" onclick="createimgs();" />
</body>
方法二：
注释：节点操作包括了 替换节点和删除节点
<style type="text/css">
Image
{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function addNodes() {
var node = document.createElement("img");
node.setAttribute("src", "imgs/2.jpg");
node.setAttribute("width","200px");
document.body.appendChild(node);
}
function addimgNodes() {
var tablenode = document.createElement('table');
var tbody = document.createElement('tbody');
tablenode.setAttribute("border", "1px");
tablenode.setAttribute("width", "500px");
tablenode.setAttribute("height", "300px");
var trnode;var tdnode;var j = 0;
for (var row = 0; row < 3; row++) {
trnode = document.createElement('tr');
trnode.setAttribute("width", "100px");
trnode.setAttribute("Color", "red");
tablenode.appendChild(trnode);
for (var cell = 1; cell < 6; cell++) {
j++;
tdnode = document.createElement('td');
trnode.appendChild(tdnode);
var imgNodes = document.createElement("img");
imgNodes.setAttribute("src", "scenery/" + j + ".jpg");
tdnode.appendChild(imgNodes);
}
tbody.appendChild(trnode);
}
tablenode.appendChild(tbody);
document.body.appendChild(tablenode);
}
//替换节点
function ReplaceNode() {
var reimgnode = document.getElementsByTagName("img")[8];
var tdnode = document.createElement("img");
tdnode.setAttribute("src","imgs/2.jpg");
reimgnode.parentNode.replaceChild(tdnode,reimgnode);//通用的
}
//删除节点
function RemoveNode()
{
var reimgnode = document.getElementsByTagName("img")[11];
reimgnode.parentNode.removeChild(reimgnode);
}
<!--//相册方法二创建表格-->
function createimgs() {
var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',
'3615bd55e6db2d3eb2a45a8369653f12(1).jpg',
'3615bd55e6db2d3eb2a45a8369653f12.jpg',
'837adad119910d349f05149ad4a02ef0.jpg',
'849b23dac9ceafe6d7e7b94a73b46e82.jpg',
'91fe451f6e8081fe492c6ae617a50274.jpg',
'9b1b7be8d60eef1e15257797d779d91b.jpg',
'9fce9273034aed88fab0bcfef344dae7.jpg',
'a5f59f9d670a936bf8281090bc2ce7c7.jpg',
'cda8a8f5b72e165c153fd396db02ab64.jpg',
'd159717ab855f729066b333d439f630e.jpg',
'd7ef1897c62640dba44532e6475c49c6.jpg',
'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg',
'f6b31d9bca975794bd23fdf71295e1c4.jpg',
'f856bd37b432eb532098fa170dfbafd4.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', 'images/' + array[count]);
tdnode.appendChild(imgnode);
trnode.appendChild(tdnode);
count++;
}
tbody.appendChild(trnode);
}
tablenode.appendChild(tbody);
document.body.appendChild(tablenode);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="添加节点" onclick="addimgNodes()" />
<input id="Button2" type="button" value="替换节点" onclick="ReplaceNode()" />
<input id="Button3" type="button" value="删除节点" onclick="RemoveNode()" />
</body>