innerHTML创建一个新元素，而不是替换目标元素的innerHTML

Question

我试图替换<i>元素的innerHTML，但似乎创建了一个额外的<i>元素，而不是替换和重写innerHTML。 <i>元素包含一个名为zmdi的库的类。 我的目标是更改此元素的类，以便在单击时更改图像。

这是我想要改变的HTML的元素： <i class="zmdi zmdi-mic zmdi-hc-2x" id = "micButton"></i>

我正在尝试将其更改为： <i class="zmdi zmdi-mic-off zmdi-hc-2x" id = "micButton"></i>

我尝试了几件事：

1.在记录时，我注意到在单击元素之前，它的innerHTML似乎没有任何价值。 单击后，它会记录我设置的innerHTML，它是：

<i class="zmdi zmdi-mic-off zmdi-hc-2x" id = "micButton"></i>

我不确定这是否与问题有关，但它似乎很奇怪，特别是因为我在HTML文件的底部调用了js文件，因此在初始化之前尝试调用该元素应该没有问题。

2. 我尝试更改测试div的innerHTML。 测试div如下： <div class="blue" id="test">test div</div>当点击它时，innerHTML被改为<div class="red" id="test">test div</div>它按预期工作，但是在单击div之前的日志中，它的值只是test div而我预计它也会记录所有innerHTML。 另外，不知道为什么，但是这个确实用新的innerHTML成功地替换了它的innerHTML，而另一个没有。

这是一个显示问题的codepen： https ：//codepen.io/mso122591/pen/JQWMYX

这是相关的HTML（注意：我正在使用哈巴狗）

doctype html
html(lang='en')
  head
    title= title
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
script.
      var room="#{room}";
link(rel='stylesheet', href='/style.css')
body
<h1>#{title} </h1>
<div class="blue" id="test">test div</div>
<div class= "menu">
 <div class= "buttons-container">
     <div class= "single-button-container">
        <i class="zmdi zmdi-mic zmdi-hc-2x" id = "micButton"></i>
     </div>
 </div>
<script src="/gameChat.js"></script>

这是相关的JS：

let micButton= document.getElementById('micButton');
 //Test Div
let test=document.getElementById('test');

//Onclick for element I am trying to change
micButton.addEventListener("click", function(event){
    console.log("before click",micButton.innerHTML);
    micButton.innerHTML= '<i class="zmdi zmdi-mic-off zmdi-hc-2x" id = 
"micButton"></i>';
    console.log("after click",micButton.innerHTML);
  });


//Onclick for the Test Div
    test.addEventListener("click", function(event){
    console.log(" test div before click",test.innerHTML);
    test.innerHTML= '<div class="red" id="test">test div</div>';
   console.log("test div after click",test.innerHTML);
  });

我认为这应该足以显示问题，但如果需要更多代码，请告诉我。

我最终通过使用.className而不是.innerHTMl并以这种方式设置类（这可能是一种更好的方式来实现它）来实现这一点。但是理解这里的问题会很棒。

Answer 1

尝试使用classList.add / classList.remove而不是innerHTML。 像这样的东西：

micButton.addEventListener("click", function(e){
    micButton.classList.add('new-class');
    micButton.classList.remove('old-class');
  });

Answer 2

关于实际问题 - innerHTML是content / child元素。 所以它不应该包含元素本身。 在这种情况下，innerHTML不是正确的解决方案，因为没有内容。 建议的类添加/删除是一个更好的解决方案。

Answer 3

通常innerHTML用于替换标记包含的实际文本。 当使用innerHTML并将其设置为<i class="zmdi zmdi-mic-off zmdi-hc-2x" id = "micButton"></i>你要求它做的是取当前的空字符串<i>并添加一个全新的<i>标签。 这在第一个按钮单击中演示。 您将看到文本消失，因为它已被标记替换。

目前更换类的现代方法是使用classList 。 第二种方法演示了如何使用它。

 let failButton = document.getElementById('failButton'); let micButton= document.getElementById('micButton'); //Onclick for element adding tag into tag failButton.addEventListener("click", function(event){ console.log("before click",failButton.innerHTML); failButton.innerHTML= '<i class="zmdi zmdi-mic-off zmdi-hc-2x" id = "failButton"></i>'; console.log("after click", failButton.innerHTML); }); //Onclick for element that works micButton.addEventListener("click", function(event){ document.getElementById("micButton").classList.add('zmdi-mic-off'); document.getElementById("micButton").classList.remove('zmdi-mic'); console.log(document.getElementById("micButton")); }); 

 <div class= "menu"> <div class= "buttons-container"> <div class= "single-button-container"> <i class="zmdi zmdi-mic zmdi-hc-2x" id = "failButton">Replace this with tag</i> </div> </div> <div class= "menu"> <div class= "buttons-container"> <div class= "single-button-container"> <i class="zmdi zmdi-mic zmdi-hc-2x" id = "micButton">Replace class in tag</i> </div> </div> 

Answer 4

您可以使用JQuery toggleClass()来缩短所有这些代码：

https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/43/

$("#test").click(function(){
  $(this).toggleClass( "red" )
});
$(".single-button-container > i").click(function(){
  $(this).toggleClass("zmdi-mic")
  $(this).toggleClass("zmdi-mic-off")
});

注： toggleClass(.red)的工作，因为你已经.red下.blue在你的CSS。 CSS将最后一种样式应用于元素。 该元件开始接触只有类.blue然后切换.red和关闭。