如何访问动态创建的<li> javascript 中的元素？</li>

Question

我正在尝试访问动态创建的元素<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>"+"&gt"+"</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 事件可以通过点击事件来关闭吗？

Answer 1

这应该可以工作，在评论中解释并改进了一些删除连接。

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>"+"&gt"+"</span>"+"</li>";
    var li = document.createElement('li');
    var span = document.createElement('span');
    span.textContent = "&gt";

    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';
        });
  }

如何访问动态创建的<li> javascript 中的元素？</li>

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-16 19:38:39

如何访问动态创建的<li> javascript 中的元素？</li>

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-16 19:38:39

解决方案1
0 已采纳 2020-04-16 19:38:39