Javascript 动态删除重复的 innerHTML

Question

在下面的代码中，我使用 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 值？

Answer 1

可以先保存在变量中，再赋值给两个元素：

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 - 只使用 innerHTML 在分配或检索 HTML 标记 时。 textContent 更快、更安全，并且在语义上更合适。

element.textContent = text;

Answer 2

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

Javascript 动态删除重复的 innerHTML

Javascript dynamically removing duplicate innerHTMLs

html

javascript

arrays

dynamic

innerhtml