html5动态删除div标签属性,js入门动态添加删除标签

js、动态添加删除

运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况

createElemen创建元素；

appendChild追加元素；

parentNode返回指定节点的父节点；

removeChild删除指定的元素节点。

第一步 HTML写法

动态创建元素

css设置属性

#box{

width：200px;

height:200px;

border:1px solid #ccc;

}

动态创建、删除元素

//获取元素的ID

var oBox=document.getElementById("box");

var oTxt=document.getElementById("txt");

var oBtn=document.getElementById("btn");

//添加

oBtn.οnclick=function(){

var pp =document.createElement("p");

var del=document.createElement("input");

del.type="button";

del.value="删除";

wenben=oTxt.value;

pp.innerHTML=wenben;

pp.style.color="red";

oBox.appendChild(pp);

pp.appendChild(del);

//删除

del.οnclick=function(){

pp.parentNode.removeChild(pp);

}

oTxt.value="";

}

考虑一下正常的思路，我们通常是通过for循环来添加删除、但是那样肯定是执行不了代码的！

它为什么能把元素给删除掉呢，是因为咱们创建元素的时候就已经给他把那个click方法给添加进那个删除元素里边去了！

看一下下边的代码你就能明白了吧！

//获取元素的ID

var oBox=document.getElementById("box");

var oTxt=document.getElementById("txt");

var oBtn=document.getElementById("btn");

//添加

oBtn.οnclick=function(){

var pp =document.createElement("p");

var del=document.createElement("input");

del.type="button";

del.value="删除";

wenben=oTxt.value;

pp.innerHTML=wenben;

pp.style.color="red";

//删除

del.οnclick=function(){

pp.parentNode.removeChild(pp);

}

oTxt.value="";

oBox.appendChild(pp);

pp.appendChild(del);

}

就是这个样子！有点眼熟，喜欢的话，点一下赞，谢谢！

下边附上演示地址。。。

http://runjs.cn/detail/xwqcq6on