html——javasprit脚本之DOM

最新推荐文章于 2023-08-22 16:50:15 发布

原创最新推荐文章于 2023-08-22 16:50:15 发布 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#脚本 #javascript #html

收录于

Windows 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

这篇博客介绍了如何在HTML中使用JavaScript操作DOM元素。通过window.onload事件生成了一个包含50个li元素的ul列表，并为每个li元素添加了点击事件，显示当前点击的li序号。还展示了两个函数，clearText()用于删除指定节点内容，addText()用于在特定位置插入新的li节点。

<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].onclick=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 onclick="clearText()">清除节点内容</button>
<button onclick="addText()">增加节点内容</button>
</body>
</html>