有没有办法清除所有 innerHTML？

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 你将需要遍历所有这些。您可以使用常见的 class:

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

创建一个class，设置p标签和select全部通过这个class和运行一个用于清理所有。

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？

Is there a way to clear all innerHTML's?

html

javascript

innerhtml