本文实例讲述了javascript动态创建及删除元素的方法。分享给大家供大家参考。具体分析如下： 在DOM中我们可以方便快速的动态删除与删除dom元素，这里我们就来给各位朋友简单的介绍一下。 例1： 动态创建一个按钮 复制代码 代码如下: 动态创建按钮 <br /> var a,b,ab,ba,c;<br /> function createInputA(){<br /> a = document.createElement("input"); //使用DOM的创建元素方法<br /> a.type = "button" ; //设置元素的类型<br /> a.value = "按钮A"; //设置元素的值<br /> a.attachEvent("onclick",addInputB); //为控件添加事件<br /> document.body.appendChild(a); //添加控件到窗体中<br /> //a = null; //释放对象<br /> } 例2： 复制代码 代码如下: <br /> function test(){ <br /> //createElement() 创建一个指定标签名的元素[比如:动态创建超链接]<br /> var createa=document.createElement("a");<br /> createa.id="a1";<br /> createa.innerText="连接到百度";<br /> createa.href="http://www.jb51.net";<br /> //createa.color="green" ////添加颜色(不要忘记style属性，不然没有效果)<br /> createa.style.color="green"<br /> //添加默认位置--body 并且添加子节点<br /> //document.body.appendChild(createa);<br /> //放置指定位置<br /> document.getElementById("div1").appendChild(createa);<br /> }<br /> <br /> function test2(){<br /> //指定位置删除节点removeChild()<br /> document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重复 js只取第一个<br /> }<br /> 动态创建多个表单： 复制代码 代码如下: <br /> window.onload = function() {<br /> var aBtn = document.createElement("input");<br /> var bBtn = document.createElement("input");<br /> var cBtn = document.createElement("input");<br /> <br /> aBtn.type = "button";<br /> aBtn.value = "按钮A";<br /> aBtn.onclick = copyBtn;<br /> <br /> bBtn.type = "button";<br /> bBtn.value = "按钮B";<br /> bBtn.onclick = copyBtn;<br /> <br /> cBtn.type = "button";<br /> cBtn.value = "按钮C";<br /> cBtn.onclick = clearCopyBtn;<br /> <br /> document.body.appendChild(aBtn);<br /> document.body.appendChild(bBtn);<br /> document.body.appendChild(cBtn);<br /> };<br /> <br /> function copyBtn() {<br /> var btn = document.createElement("input");<br /> btn.type = "button";<br /> btn.value = this.value;<br /> btn.isCopy = true;<br /> btn.onclick = copyBtn;<br /> document.body.appendChild(btn);<br /> }<br /> <br /> function clearCopyBtn() {<br /> var btns = document.getElementsByTagName("input");<br /> var length = btns.length;<br /> for (var i = length - 1; i >= 0; i--) {<br /> if (btns[i].isCopy) {<br /> document.body.removeChild(btns[i]);<br /> }<br /> }<br /> }<br /> 希望本文所述对大家的javascript程序设计有所帮助。
