javascript - 如何访问动态创建的
问题描述
我正在尝试访问动态创建的元素<li>
。我已经尝试使用 TagName 但它不起作用......
HTML
<body onload="ops()">
<div id="list"></div>
JavaScript
function ops()
{
var ar=["Nucleotide_chnage","Ethinicity","study of dance","disease"];
var text="<ul>";
for(i in ar)
{
text+="<li>"+ar[i]+"<span>"+">"+"</span>"+"</li>";
}
text+="</ul>";
var y=document.getElementById("list").innerHTML=text;
}
var close=document.getElementByTagName("li");
for(var i=0;i<close.length;i++)
{
close[i].addEventListener("click",function(){
this.parentElement.style.display='none';
});
}
我想澄清一下 onload 事件可以通过点击事件来关闭吗?
解决方案
这应该可以工作,在评论中解释并改进了一些删除连接。
var body = document.querySelector("body");
var ar=["Nucleotide_chnage","Ethinicity","study of dance","disease"];
var ul = document.createElement('ul');
for(i in ar) {
// text+="<li>"+ar[i]+"<span>"+">"+"</span>"+"</li>";
var li = document.createElement('li');
var span = document.createElement('span');
span.textContent = ">";
li.appendChild(span);
ul.appendChild(li);
}
// You have to attach the elements to DOM to create listeners
body.appendChild(ul);
// you have a typo
// getElementByTagName is getElementsByTagName
var close=document.getElementsByTagName("li");
for(var i=0;i<close.length;i++) {
close[i].addEventListener("click",function(){
this.parentElement.style.display='none';
});
}
推荐阅读
- python - DJANGO 新用户注册
- javascript - 在 EJS 生成的内容上显示/隐藏功能
- python - 如何根据用户角色在类视图中启用/禁用表单 - Django
- javascript - 将按钮操作添加到输入类型搜索
- web-scraping - Axios GET 请求导致 403。邮递员工作
- amazon-web-services - 未在 Beanstalk 上提供静态文件
- performance - 从 iOS 位置数据计算 GPS 速度
- reactjs - 为什么在更新套接字事件时我的状态为空?
- python - tensorflow-datasets 如何将标签转换为 coco/2017 的字符串
- c - 在C中使用STRTOK拆分句子