Javascript动态删除重复的innerHTML答案

【问题标题】：Javascript dynamically removing duplicate innerHTMLsJavascript动态删除重复的innerHTML
【发布时间】：2020-12-24 20:29:35
【问题描述】：

在下面的代码中，我使用document.createElement('span') 创建了两个<span> 元素。我将<span> 的innerHTML 设置为相同。我的问题是可以删除重复的 innerHTML 值吗？

    spanContainer = [];
    spanContainer[0] = document.createElement('span');
    spanContainer[0].innerHTML = 'text';

    spanContainer[1] = document.createElement('span');
    spanContainer[1].innerHTML = 'text';

我如何动态地删除重复的 innerHTML 值？

【问题讨论】：

什么意思？您是否试图避免写两次'text'？
@CertainPerformance 是

标签： javascript html arrays dynamic innerhtml

【解决方案1】：

const spanContainer = [];
const arrayStr = []
function Unic(str){
  if(arrayStr.indexOf(str)== -1){
    arrayStr.push(str)
    spanContainer[0] = document.createElement('span');
    spanContainer[0].innerHTML = str;
  }
  }

【讨论】：

【解决方案2】：

您可以先将其保存在变量中，然后分配给两个元素：

const spanContainer = [];
const html = 'text';
spanContainer.push(document.createElement('span'));
spanContainer.push(document.createElement('span'));
spanContainer[0].innerHTML = html;
spanContainer[1].innerHTML = html;

不推荐，因为它的可读性较差，但您也可以使用赋值运算符的结果表达式将其压缩为一行：

spanContainer[0].innerHTML = spanContainer[1].innerHTML = html;

或者，使用辅助函数：

const spanContainer = [];
const html = 'text';
const makeElement = (tagName, html) => {
  const element = document.createElement(tagName);
  element.innerHTML = html;
  spanContainer.push(element);
};
makeElement('span', html);
makeElement('span', html);

如果您分配的 HTML 确实只包含文本，就像本例中一样，那么您应该分配给 textContent 而不是 innerHTML - 分配或检索 HTML 标记时仅使用 innerHTML时间>。 textContent 更快、更安全、语义更合适。

element.textContent = text;

【讨论】：