javascript - 清空javascript中的许多span元素

Question

我的网页上有这些跨度，我试图在页面加载时清空它们的 innerHTML。

但我不想对所有 100 跨度执行 document.getElelmentById().innerHTML = '';，如果有办法可以清空的话他们使用他们的类(class)名称。

$(document).ready(function() {
  $a = document.getElementsByClassName("char_counter");
  for (i = 0; i < $a.length; i++) {
    console.log($a[i]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="char_counter" id="one">1</span>
<span class="char_counter" id="two">2</span>
<span class="char_counter" id="three">3</span>
<span class="char_counter" id="four">4</span>

Answer 1

不需要遍历所有元素并将 innerHTML 设置为空字符串。

您可以使用 html() 或 text() 将它们的 innerHTML 设置为空。

$('.char_counter').html('');

将选择所有具有 char_counter 类的元素并将它们的 innerHTML 设置为空字符串。

更具体地说，您还可以使用

$('span.char_counter').html('');

演示

$(document).ready(function() {
  $('.char_counter').html('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="char_counter" id="one">1</span>
<span class="char_counter" id="two">2</span>
<span class="char_counter" id="three">3</span>
<span class="char_counter" id="four">4</span>