如何解决Javascript动态删除重复的innerHTML
在下面的代码中,我有两个使用<span>
创建的document.createElement('span')
元素。我将<span>
的innerHTML设置为相同。我的问题是可以删除重复的innerHTML值吗?
spanContainer = [];
spanContainer[0] = document.createElement('span');
spanContainer[0].innerHTML = 'text';
spanContainer[1] = document.createElement('span');
spanContainer[1].innerHTML = 'text';
如何 动态 删除重复的innerHTML值?
解决方法
您可以先将其保存在变量中,然后分配给两个元素:
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
,
const spanContainer = [];
const arrayStr = []
function Unic(str){
if(arrayStr.indexOf(str)== -1){
arrayStr.push(str)
spanContainer[0] = document.createElement('span');
spanContainer[0].innerHTML = str;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。