如何从动态创建的元素获取元素类名称？

Question

我开始在网站内创建一些次要代码，并且希望进行一些动态创建，因此使用JavaScript for循环创建了一些span标签。 在相同的代码中，但是在不同的循环中，我想向标签添加事件监听器。我得到的错误是创建的元素不存在，我有一些想法为什么它不起作用，但是搜索了Web和堆栈溢出没有给我答案。

我曾考虑过将两个for循环都放入一个函数中，并以类似的方式调用该函数jquery与它的文档就绪函数一起工作。 但我认为这不会解决问题

var country = ["is_AmericaN", "is_Europe", 
"is_Africa","is_AmericaS","is_Asia","is_Australia"];

var spanInto = document.getElementById("spanSelect");

for(i=0; i<6; i++)
{
var spanMake = document.createElement("SPAN");

spanInto.appendChild(spanMake);

spanMake.className += "spanLanguage" + " " + country[i];
}

上面的代码创建了元素，下面的代码尝试调用它们

var countryClass = doucment.getElementsByClassName("spanLanguage");
for(i=0; i< document.countryClass.length; i++)
{
countryClass[i].addEventListener("click", function(){

var hrDisplay = document.getElementById("selectiveDisplay");

hrDisplay.removeAttribute("id");

hrDisplay.className = "noDisplay";

},false);
}

我希望工作代码一旦单击任何span标签，就将hr标签的显示设置为block或flex。 我不想手动创建5-6个跨度标签，它必须是动态创建的。

Answer 1

您缺少添加类的位置

var spanMake = document.createElement("SPAN");

spanInto.appendChild(spanMake);

spanMake.className += "spanLanguage" + " " + country[i];

在这里，您是在将类追加到span之后分配类的，这是错误的，您需要在之前分配类。

var countryClass = doucment.getElementsByClassName("spanLanguage");
for(i=0; i< document.countryClass.length; i++)
{

doucment是document和document.countryClass应该是countryClass因为您已经拥有该元素的实例

 var country = ["is_AmericaN", "is_Europe", "is_Africa", "is_AmericaS", "is_Asia", "is_Australia" ]; var spanInto = document.getElementById("spanSelect"); for (i = 0; i < 6; i++) { var spanMake = document.createElement("SPAN"); spanMake.textContent = country[i]; spanMake.className += "spanLanguage" + " " + country[i]; spanInto.appendChild(spanMake); } var countryClass = document.getElementsByClassName("spanLanguage"); for (i = 0; i < countryClass.length; i++) { countryClass[i].addEventListener("click", function() { var hrDisplay = this; hrDisplay.removeAttribute("id"); hrDisplay.className = "noDisplay"; }, false); }

 .noDisplay { display: none; }

 <span id="spanSelect"></span> <br/> //click on any of them to replace the class

Answer 2

有多个要纠正的地方：

您的代码中有一个“怀疑”类型。请改用“文档”。
创建的元素上没有任何文本，当元素在DOM中不可见时如何调用click。
事件被附加到锚点/按钮，而不是跨度。
不确定您要通过附加事件来做什么。

以下是当您尝试在动态创建的元素上添加事件时适合您的代码段。如果您需要进一步的帮助，请告诉我

 function temp() { var country = ["is_AmericaN", "is_Europe", "is_Africa", "is_AmericaS", "is_Asia", "is_Australia" ]; var spanInto = document.getElementById("spanSelect"); for (i = 0; i < 6; i++) { var spanMake = document.createElement("a"); spanMake.innerHTML = country[i]; spanInto.appendChild(spanMake); spanMake.className += "spanLanguage" + " " + country[i]; } } function attachEvent() { var countryClass = document.getElementsByClassName("spanLanguage"); for (i = 0; i < countryClass.length; i++) { countryClass[i].addEventListener("click", function(event) { console.log("I am called" + event.target); //var hrDisplay = document.getElementById("selectiveDisplay"); //hrDisplay.removeAttribute("id"); //hrDisplay.className = "noDisplay"; }, false); } }

 a { padding: 20px; }

 <body> <div id="spanSelect"></div> <div id="selectiveDisplay"> </div> <button onclick="temp()"> Call Me </button> <button onclick="attachEvent()"> Attach Event </button> </body>

如何从动态创建的元素获取元素类名称？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-12-27 08:18:10

解决方案2
-1 2018-12-27 08:21:39

如何从动态创建的元素获取元素类名称？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-12-27 08:18:10

解决方案2 -1 2018-12-27 08:21:39

解决方案1
1 已采纳 2018-12-27 08:18:10

解决方案2
-1 2018-12-27 08:21:39