使用javascript更改子元素的innerHTML

【问题标题】：changing innerHTML of child element using javascript使用javascript更改子元素的innerHTML
【发布时间】：2018-12-30 04:00:04
【问题描述】：

我想在下面的代码中将我的图标从 expand_more 更改为 expand_less

<li class="dropdown-bt" onclick="dropdown('content');">
    <a>dropdown-content <i class="material-icons">expand_more</i></a>
</li>

我将多次使用相同的代码，所以最好多次使用函数。我想过为每段代码使用 ID，但这会很忙。所以我想写一个函数来做但是我不知道怎么做，所以请帮忙。

【问题讨论】：

欢迎来到 Stack Overflow。通常会为此设置一个类，并在 Javascript 中使用类选择器。你试过什么了？ How to Ask

标签： javascript html css

【解决方案1】：

只需将对象事件作为参数传递，例如 e 到您的 dropdown() 并使用 textContent 属性来检索当前元素内容，检查它的值并将内容替换为另一个像这样的文本内容：

var btn = document.getElementById("dropdownBt");

function dropdown(e) {
  var innerText = e.target.children[0];
  
  if(innerText.textContent == "expand_more") {
  	innerText.textContent = "expand_less";
  } else {
    innerText.textContent = "expand_more";
  }
}

btn.addEventListener('click', dropdown);

&lt;li class="dropdown-bt" id="dropdownBt"&gt;&lt;a&gt;dropdown-content &lt;i class="material-icons"&gt;expand_more&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;

【讨论】：