在使用Javascript进行动态的增加和删除元素
首先我们需要先创建一个盒子并附上属性设置盒子的长和宽以及线的粗细和颜色
<div style="width:300px;height:300px;border:1px double red;" id="div1">div</div>
然后将设置我们需要添加和删除的按钮并添加点击事件
<input type="button" value="增加按钮" onclick="createButton()" ><input type="button" value="删除按钮" onclick="deleteButton()" ><input type="button" value="增加链接" onclick="createLink()" ><input type="button" value="删除链接" onclick="deleteLink()" >
接下来使用js进行动态添加删除
先试用js创建一个新的按钮并赋值上属性
function createButton(){//alert("获得");//创建新的 input按钮var all = document.createElement("input");//给元素添加属性all.type="button";all.value="确定";all.id="did";
接下来获取到当前的div并在div内部使用appendChild()添加在js里创建的input
//获得当前div并在div内部创建inputdocument.getElementById("div1").appendChild(all);
接下来是删除
在获取到元素div时找到div内部创建的input使用removeChild()删除接节点
/*删除按钮 */function deleteButton(){var ss=document.getElementById("did");document.getElementById("div1").removeChild(ss); }
添加链接和删除链接与上面的步骤一样
完整代码为:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><!-- 动态添加与删除 --><script type="text/javascript">/* 创建按钮 *///创建函数function createButton(){//alert("获得");//创建新的 input按钮var all = document.createElement("input");//给元素添加属性all.type="button";all.value="确定";all.id="did";//获得当前div并在div内部创建inputdocument.getElementById("div1").appendChild(all);}/*删除按钮 */function deleteButton(){var ss=document.getElementById("did");document.getElementById("div1").removeChild(ss); }/* 获得链接 */function createLink(){//创建新的链接var ajj = document.createElement("a");ajj.href="/?tn=88093251_75_hao_pg";ajj.id="ai";ajj.style.color="red";//给a标签赋予名字ajj.innerText="百度";//获取当前div并创建新链接document.getElementById("div1").appendChild(ajj);}//删除链接function deleteLink(){document.getElementById("div1").removeChild(document.getElementById("ai"));}</script><body><input type="button" value="增加按钮" onclick="createButton()" ><input type="button" value="删除按钮" onclick="deleteButton()" ><input type="button" value="增加链接" onclick="createLink()" ><input type="button" value="删除链接" onclick="deleteLink()" ><div style="width:300px;height:300px;border:1px double red;" id="div1">div</div></body></html>
成品展示为:
