html——javasprit脚本之DOM

78 阅读 0 评论 52 点赞

我是靠谱客的博主安静冷风，这篇文章主要介绍html——javasprit脚本之DOM，现在分享给大家，希望可以做个参考。

<html>
<head>
<title>1+1=3</title>
<script type="text/javascript">
//生成ul
window.onload = function(){
var oUi = document.getElementsByTagName("ul");
var str = "";
for(var i=0;i<50;i++){
str += "<li id="+i+">#"+i+"</li>";
}
oUi[0].innerHTML = str;
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
(function(n){
oli[i].οnclick=function(){
alert("当前项是："+n);
}
})(i)
}

}

function clearText() {
var x=list.removeChild(list.childNodes[5]);
alert("删除5节点的内容："+x.innerHTML+"<br/>");
}

function addText() {
var otest = document.getElementById("list");
var newnode=document.createElement("li");
var node=document.getElementById("10");
newnode.innerHTML="baidu.com /";
otest.insertBefore(newnode,node);
/*要先取node的值并且创建newnode，使用格式是父节点.inserBefore（newnode,node）*/
}

</script>

</head>
<body>

<ul id="list" class="foo"></ul>
<button οnclick="clearText()">清除节点内容</button>
<button οnclick="addText()">增加节点内容</button>
</body>
</html>