动态创建的概念:
通过在js中创建、移除元素(有些书上也称为节点),实现动态的创建元素,需要什么元素通过调用document的createElement方法来创建具有指定标签的DOM对象然后通过调用某个元素的appendChild()方法将新创建元素添加到相应的元素下。
常用的方法:
createElement(‘element’);创建一个元素(节点)
appendChild(node); 追加一个元素(节点)
removeChild(node);移除一个元素(节点)
replaceChild(new,old);替换一个元素(节点)
insertBefore(new,参照);把节点加到前面(插到某个节点前面)
元素对象.firstChild返回元素对象中的第一个元素
元素对象.lastChild返回元素对象中的最后一个元素
动态创建、删除元素代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建</title>
<script>
/*点击一个按钮创建一个层,点击创建一个按钮将创建一个按钮并且追加到
之前创建的层中,再添加文本框,要求插入到这个层的首部(也就是每次往这个层的第一个位置插入)
点击删除元素按钮,删除层中的所有元素*/
//页面加载完成后执行
onload=function(){
//创建第一个按钮的onclick事件
document.getElementById('btn1').onclick=function(){
//document.createElement('标签名')创建一个指定标签名的元素(节点)返回该元素的对象
//创建一个层//通过if语句限制只能创建一个层
if(!document.getElementById('dv')){
var divObj = document.createElement('div');
//为创建的层添加样式
divObj.id='dv';/*添加id*/
divObj.style.width='300px';
divObj.style.height='300px';
divObj.style.backgroundColor='#333333';
}
//调用某个元素的appendChild(元素对象)将新创建的元素追加到相应的标签下
//将层追加到body中
document.body.appendChild(divObj);
};
var i=0;//后面用于创建按钮的value值
//创建第二个按钮的onclick事件
document.getElementById('btn2').onclick=function(){
i++;
//创建一个按钮
var inputObj = document.createElement('input');
inputObj.type='button';
inputObj.value='按钮'+i;
//将新创建的元素追加到层中
document.getElementById('dv').appendChild(inputObj);
};
//创建第三个按钮的onclick事件
document.getElementById('btnInsert').onclick=function(){
i++;
//创建文本框
var txtObj = document.createElement('input');
txtObj.type='text';
txtObj.value='文本框'+i;
将新创建的元素追加到层开始位置
var divObj = document.getElementById('dv');
//每次插入到第一个元素的前面
divObj.insertBefore(txtObj,divObj.firstChild);
};
//创建第四个按钮的onclick事件
document.getElementById('btnRemove').onclick=function(){
//获取层对象
var divObj = document.getElementById('dv');
//divObj.firstChild判断层中是否有第一个元素
while(divObj.firstChild){
//移除元素
divObj.removeChild(divObj.firstChild);
};
};
};
</script>
</head>
<body>
<input type="button" value="创建一个层" id="btn1" />
<input type="button" value="创建一个按钮" id="btn2" />
<input type="button" value="插入一个文本框" id="btnInsert" />
<input type="button" value="删除一个按钮" id="btnRemove" />
</body>
</html>