Question

正如标题所述，我想知道是否有可能清除使用javascript更改的每个innerHTML。

例如，如果我有20个函数，每个函数都替换了p-tag的innerHTML，我是否可以使它们全部不包含任何内容（只需单击按钮），而不会在每个函数上更改.innerHTML？

function resetAll() {
  outputOne.innerHTML = "";
  outputTwoA.innerHTML = "";
  outputTwoB.innerHTML = "";
  outputThreeA.innerHTML = "";
  outputThreeB.innerHTML = "";
  outputThreeC.innerHTML = "";
}

这是我不想做的一个例子。

我知道我可以刷新页面，但这不是我要求的解决方案。

Answer 1

只使用javascript，你需要遍历所有这些。你可以用一个共同的类来做到这一点：

var clearUs = document.querySelectorAll('.common-class');
var index = 0, length = clearUs.length;
for ( ; index < length; index++) {
    clearUs[index].innerHTML = '';
}

如果你想使用像jquery这样的东西，它的代码较少，但仍然在后台发生循环，你只需要查看或输入它：

$('.common-class').html('');

Answer 2

创建一个类，在p标签上设置并按此类选择all并运行一个for clean all。

Answer 3

只需在更改方法中缓存您更改的元素，然后循环更改的数组并清除innerHTML。

你当然还可以检查更改后的数组是否已包含你要推送的元素，但举个例子，我认为这已经足够了

var changed = [];

function change(pIndex, text) {
  var all = document.getElementsByTagName('p');
  if (!all || !all[pIndex]) {
    // element not found
    return;
  }
  all[pIndex].innerHTML = text;
  changed.push(all[pIndex]);
}

function clearAll() {
  for (var i = 0, len = changed.length; i < len; i++) {
    changed[i].innerHTML = '';
  }
  changed.splice(0, changed.length);
}

<p></p>
<p></p>
<p></p>
<button onclick="change(0, 'test')" type="button">Set p 1</button>
<button onclick="change(1, 'test')" type="button">Set p 1</button>
<button onclick="change(2, 'test')" type="button">Set p 1</button>
<button onclick="clearAll();" type="button">Clear</button>

有没有办法清除所有innerHTML？

3 个答案: