我想问下js如何动态添加和移除元素
动态添加元素是对DOM的基本操作，下面便是简单的元素添加与删除。
(1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild()
removeChild() // 删除一个节点
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
<!DOCTYPE HTML>
<html>
<head>
<title>动态</title>
<meta charset="UTF-8">
</head>
<script type="text/javascript">
window.onload=function(){
var oul=document.getElementById("ul1"); //获取要添加在ul中的id
document.getElementById("add").onclick=function(){
var oli=document.createElement("li"); //新建元素的类型
var ali=oul.getElementsByTagName("li"); //获取原ul中的li
var otxt=document.getElementById("tet"); //获取文本框的id
oli.innerHTML=otxt.value; //将文本框中输入的内容动态加在新的元素中
oli.id="id1"; //给每一个新加的元素加id，以便后来的删除
if(ali.length==0)
oul.appendChild(oli); //检验，如果原ul中没有元素，则先添加一个
else
oul.insertBefore(oli,ali[0]); //在原li之前添加元素
}
document.getElementById("dele").onclick=function(){
document.getElementById("id1").parentNode.
removeChild(document.getElementById("id1")); //移除添加的元素
}
}
</script>
<body>
<input type="text" id="tet" />
<input type="button" value="增加" id="add" />
<input type="button" value="删除" id="dele" />
<ul id="ul1">
</ul>
</body>
</html>
| 2018-06-10
在线QQ：