前面有讲过一些DOM的基本概念。
今天来说一下DOM 的一些基本操作，主要有创建节点，追加节点，删除节点。
1.创建DOM元素：
createElement(标签名) —— 创建一个节点
appendChild(节点) —— 追加一个节点
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>DOM 操作</title> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????var oBtn = document.getElementById("btn1"); ???????????????var oUl = document.getElementById("ul1"); ???????????????var oTxt = document.getElementById("txt1"); ???????????????????????????oBtn.onclick = function(){ ???????????????????var oLi = document.createElement(‘li‘); ???????????????????oLi.innerHTML = oTxt.value; ???????????????????oUl.appendChild(oLi); ???????????????????????????????????} ???????????} ???????</script> ???</head> ???<body> ???????<input type="text" id="txt1" /> ???????<input type="button" name="btn1" id="btn1" value="创建li" /> ???????<ul id="ul1"></ul> ???</body></html>2.插入元素：
insertBefore(节点, 原有节点) —— 在已有元素前插入
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>DOM 操作</title> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????var oBtn = document.getElementById("btn1"); ???????????????var oUl = document.getElementById("ul1"); ???????????????var oTxt = document.getElementById("txt1"); ???????????????var aLi = document.getElementsByTagName("li"); ???????????????????????????????oBtn.onclick = function(){ ???????????????????var oLi = document.createElement(‘li‘); ???????????????????oLi.innerHTML = oTxt.value; ???????????????????if(aLi.length > 0){ ???????????????????????oUl.insertBefore(oLi, aLi[0]); ???????????????????}else{ ???????????????????????oUl.appendChild(oLi); ???????????????????} ???????????????????????????????????} ???????????} ???????</script> ???</head> ???<body> ???????<input type="text" id="txt1" /> ???????<input type="button" name="btn1" id="btn1" value="创建li" /> ???????<ul id="ul1"></ul> ???</body></html>3.删除节点：
removeChild(节点) —— 删除一个节点
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>DOM 操作</title> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????//删除节点 ???????????????var oUl = document.getElementById("ul1"); ???????????????var aA = document.getElementsByTagName("a"); ???????????????????????????????for(var i=0;i<aA.length;i++){ ???????????????????aA[i].onclick = function(){ ???????????????????????oUl.removeChild(this.parentNode); ???????????????????} ???????????????} ???????????} ???????</script> ???</head> ???<body> ???????<ul id="ul1"> ???????????<li>第一条 <a href="javascript:;">删除</a></li> ???????????<li>第二条 <a href="javascript:;">删除</a></li> ???????????<li>第三条 <a href="javascript:;">删除</a></li> ???????</ul> ???</body></html>4.文档碎片（只能提升低级浏览器的性能，稍作了解即可）：
createDocumentFragment
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>文档碎片</title> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????????????????????var oUl = document.getElementById("ul1"); ???????????????var oFrag = document.createDocumentFragment(); //创建文档碎片 ???????????????????????????????for(var i=0;i<10000;i++){ ???????????????????var oLi = document.createElement("li"); ???????????????????oFrag.appendChild(oLi); ???????????????} ???????????????????????????????oUl.appendChild(oFrag); ???????????} ???????</script> ???</head> ???<body> ???????<ul id="ul1"> ???????????????????</ul> ???</body></html>js学习笔记33----DOM操作
原文地址：https://www.cnblogs.com/sese/p/8353533.html