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文件，因此尝试在调用元素之前应该没有问题。初始化。

我尝试更改测试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，而另一个却没有。

这是一个显示问题的代码笔：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)之所以有效，是因为CSS中.red下有.blue。 CSS将最后一种样式应用于元素。该元素仅从类.blue开始，然后切换.red的开和关。

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

4 个答案: