如何在foreach中设置innerHTML？答案

【问题标题】：How to set innerHTML in foreach?如何在foreach中设置innerHTML？
【发布时间】：2020-08-31 01:45:56
【问题描述】：

如果<a>facebook</a> 设置为<a><i class='fab fa-facebook'></i></a>，我希望每个标签innerhtml 更改此代码。

<main class="non">
 <div class="author-desc">
  <a href="#">facebook</a>, <a href="#">twitter</a>, <a href="#">github</a>
 </div>
</main>

而我的javascript是传入queryselectorall，但是foreach idk之后怎么办。

<script>
  let sosmed = document.querySelector(".author-desc");
  let sosmeds = sosmed.querySelectorAll("a");
  sosmeds.forEach(function (element) {
  if (element.innerHTML === "facebook")(function(set){
    element.innerHTML = "<i class='fab fa-facebook'></i>"
  });
});
</script>

我想用具体的解释来回答。我能做些什么呢？

我被困在这段代码中，a 的内部 html 没有改变。

sosmeds.forEach(function (element) {
  if (element.innerHTML === "facebook")(function(set){
    element.innerHTML = "<i class='fab fa-facebook'></i>"
  });

【问题讨论】：

除了<i> 缺少>，请更详细地解释您的问题是什么
你想做什么？
foreach 函数不起作用。
首先使<i> html 有效。
你有一个函数声明，没有意义，不应该有function(set){ 你正在定义一个没有执行的函数......因此它什么也不做。您的开发者工具应该会显示错误。

标签： javascript arrays foreach

【解决方案1】：

去掉什么都不做的函数，修复语法错误。

let sosmeds = document.querySelectorAll(".author-desc a");
sosmeds.forEach(function(element) {
  if (element.innerHTML === "facebook") {
    element.innerHTML = "<i class='fa fa-facebook'></i>";
  }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<main class="non">
  <div class="author-desc">
    <a href="#">facebook</a>, <a href="#">twitter</a>, <a href="#">github</a>
  </div>
</main>

【讨论】：