Javascript动态删除重复的innerHTML

Posted 2023-05-07

【中文标题】Javascript动态删除重复的innerHTML

【英文标题】：Javascript dynamically removing duplicate innerHTMLs

【发布时间】：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 是

【参考方案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;