<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用javascript動態添加刪除html元素</title>
<script type="text/javascript"><!--
function $(nodeId) {
return document.getElementById(nodeId);
}
function $Name(tagName) {
return document.getElementsByTagName(tagName);
}
function replaceMsg() {
var newNode = document.createElement("P");//創建一個P標籤
newNode.innerHTML = "<font color='red'>替換後的文字</font>";
var oldNode = $Name("P")[0];//獲取body裏面第一個p元素
oldNode.parentNode.replaceChild(newNode,oldNode);//直接替換了標籤
}
function removeMsg() {
var node = $("p2");//p標籤
var nodeBtn = $("remove");//按鈕
//node.parentNode.removeChild(node); //下面效果相同
document.body.removeChild(node);//在body中刪除id爲P2的元素
//nodeBtn.parentNode.removeChild(nodeBtn);//刪除該按鈕
document.body.removeChild(nodeBtn);
//document.body.removeNode();執行這條語句將清空body裏面的任何元素
}
function addbefore() {
var newNode = document.createElement("p");//創建P標籤
//var newText = document.createTextNode("前面添加的元素");
//newNode.appendChild(newText);//與下面效果一樣
newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//書寫P標籤裏面的內容
var oldNode = $("p3");//目標標籤
//document.body.insertBefore(newNode,oldNode);
oldNode.parentNode.insertBefore(newNode,oldNode);//在目標標籤前面添加元素
}
function addlast() {
var newNode = document.createElement("p");//創建P標籤
//var newText = document.createTextNode("後面添加的元素");
//newNode.appendChild(newText);//與下面效果一樣
newNode.innerHTML = "<font color='red'>後面添加的元素</font>";
var oldNode = $("p3");
oldNode.appendChild(newNode);
//document.body.appendChild(newNode);//如果使用該方法,則在body的最後添加元素
}
window.onload = function addArrayMsg() {
var arrayMsg = ['one','two','three','four','five'];//創建數組
var fragment = document.createDocumentFragment();//創建文檔片段
var newNode ;
for (var i=0 ;i<arrayMsg.length ;i++ ) {
newNode = document.createElement("P");//創建P標籤
var nodeText = document.createTextNode(arrayMsg[i]);//創建文本標籤,value爲數組裏面的值
newNode.appendChild(nodeText);//
fragment.appendChild(newNode);//把P標籤追加到fragment裏面
}
document.body.appendChild(fragment);//把fragment追加到body裏面
}
function addRow() {
var tab = $("myTable");
//tab.createCaption().innerHTML="<font color='red'>我的表格</font>";
var oldTr = $("handleTr");
var newTr = tab.insertRow();//創建一行
var newTd1 = newTr.insertCell();//創建一個單元格
var newTd2 = newTr.insertCell();//創建一個單元格
newTd1.innerHTML = "<input type='checkbox' />";
newTd2.innerHTML = "<div class='division clearfix' id='goods_value'><div class='span-3'> <span title='09春季新款簡約大方高雅修身針織連衣裙983配腰帶'> <a href='?product-55.html'>09春季新款簡約大方高雅修身針織連衣裙983配腰帶 </a> </span> </div> <a class='floatRight lnk' href='#' οnclick=''>刪除</a> </div>" ;
}
function removeRow() {
var tab = $("myTable");
// if(tab.rows.length>0){
// tab.deleteRow();
// if(tab.rows.length==1)
// tab.deleteCaption();
// }
var cbbox ;
for(var i=0;i<tab.rows.length;i++){
cbbox = tab.rows[i].childNodes[0].childNodes[0];//獲取input元素
if(cbbox.checked){
tab.deleteRow(i--);
}
}
}
//全選
function selAll(value){
var items = document.all.tags("input");//獲取頁面上所有的input元素
for(var i = 0;i<items.length;i++){
if(items[i].type=="checkbox"){//判斷類型是否爲checkbox
items[i].checked = value.checked;
}
}
}
function getInputValue() {
var inputArray = new Array();//創建一個數組
var tab = $("myTable");
var tbInput;
for(var i=0;i<tab.rows.length;i++){
tbInput = tab.rows[i].childNodes[1].childNodes[0].value;
if(tbInput!=""&&tbInput!=null)
inputArray.push(tbInput);
}
inputArray = inputArray.join("*^&");//默認以","號連接
$("showValue").value = inputArray;
}
var x ='10+20';
("alert(x);")
// --></script>
</head>
<body>
<p id="p1">Hello World!
<input type="button" value="替換內容" οnclick="replaceMsg();" />
<p id="p2">我可以被刪除!
<input type="button" id="remove" value="刪除它" οnclick="removeMsg();" />
<p id="p3">在我上下添加一個元素吧！
<input type="button" id="addbefore" value="前面添加" οnclick="addbefore();" />
<input type="button" id="addlast" value="後面添加" οnclick="addlast();" />
<div style="border:1px solid blue;height:300px">
<table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;" style="padding:4px;">
</table>
<input type="checkbox" οnclick="selAll(this);" />
<input type="button" value="添加一行" id="addRow" οnclick="addRow();" />
<input type="button" value="刪除一行" id="removeRow" οnclick="removeRow();" />
<textarea rows="5" cols="25" id="showValue" />
</div>
</p>
</p>
</p>
</body></html>