标签：logs end div html data- 位置 好用 child 需求
<button>点我</button>
<script>
document.write("<li class=‘kk‘>生活</li>")
</script>
<button>点我</button>
弊端：把原来的内容替换掉
var but=document.getElementsByTagName("button")[0];
//console.log(document.write);是一个函数
but.onclick=function () {
document.write("<li class=‘kk‘>生活</li>");
}
2、事件源.innerHTML +="<li></li>"(经常用，写上 + 号，原来的内容不会被替换)
ul.innerHTML+="<li class=‘kk‘>生活</li>"
//利用dom的api创建元素 把创建的元素放在变量里 var newLi=document.createElement("li"); var newL=document.createElement("li"); //赋值 newLi.innerHTML="我是createElement创建的"; newL.innerHTML="我是appendChild创建的"; //添加到ul原来里面 ul.appendChild(newL); //指定位置添加 var firUl=ul.firstElementChild || ul.firstChild; ul.insertBefore(newLi,firUl)
ul.removeChild(li3)
2、replaceChild（"新节点"，“旧节点”）替换节点（用的少）
ul.replaceChild(li3,li2)
3、克隆node.cloneNode(true)
//克隆li2标签 li2.cloneNode(true);深层复制。 for(var i=0; i<3; i++){ var clLi=li2.cloneNode(true); ul.appendChild(clLi) }
案例
点击按钮添加li列表，鼠标放上去高亮显示（鼠标离开也会有一个亮）
//需求:点击列表，添加四大美女，然后鼠标放到谁上面，谁高亮显示 //思路：创建一个数组，添加内容。利用for循环创建li标签添加到ul里面 //步骤：（指定多少个元素的创建最好用for循环） var but=document.getElementsByTagName("button")[0]; var arr=["昭君","西施","贵妃","貂蝉"]; var ul=document.getElementsByTagName("ul")[0]; but.onclick=function(){ ul.innerHTML="";//只添加一次 原理，每次循环清空了在添加 for(var i=0; i<arr.length; i++){ var li=document.createElement("li"); li.innerHTML=arr[i]; ul.appendChild(li); } //获取所有的Li标签然后，为他绑定事件，排他思想，高亮显示 var liArr=ul.children; for(var i=0; i<liArr.length; i++){ liArr[i].onmouseover=function(){ for(var j=0; j<liArr.length; j++){ liArr[j].style.background="" } this.style.background="red" } } }
在线用户
标签：logs end div html data- 位置 好用 child 需求
原文地址：http://www.cnblogs.com/wdz1/p/7570037.html
