javascript 函数仅适用于 firefox答案

【问题标题】：javascript function works only on firefoxjavascript 函数仅适用于 firefox
【发布时间】：2022-01-21 08:56:07
【问题描述】：

我制作了一个功能，可以在单击按钮后显示卡片图像。问题是它不适用于chrome。 chrome 编辑器会在路径末尾显示一个额外的“/”。

        function renderDeck(deck,ph)
    {
        
        var htmlStr = document.getElementById(ph).innerHTML;
        for (var i = 0; i < deck.length; i++) {
            htmlStr += '<div>';
            htmlStr += '<img src=' + deck[i].path + '/>';
            htmlStr += '</div>';
        }
        document.getElementById(ph).innerHTML = htmlStr;
    }

一个我推入甲板的例子

deck.push({ name: 'red_joker', path: 'cardImages/red_joker.png', val: 15 });

可能是什么问题？

【问题讨论】：

试试htmlStr += '<img src="' + deck[i].path + '"/>';
您已经用 html 标签标记了问题，HTML 不包含自闭合标签，尽管浏览器可以容忍它们。此外，您始终应该引用属性值，不这样做会带来安全风险（在这种特殊情况下可能不会，但越早忘记不良做法越好）。

标签： javascript html google-chrome firefox

【解决方案1】：

题外话：避免innerHTML += ...，因为

它必须序列化然后解析所有现有的 dom 节点
它将所有现有节点替换为副本/新节点，因此事件处理程序、您保留的引用等内容都将消失。标记本身未表达的所有内容。

function renderDeck(deck, ph) {
  // create the markup for the new items 
  const htmlStr = deck.map(item => `<div><img src="${item.path}"></div>`).join("\n");

  // parse the `htmlStr` into a DOM Node that you can add to other DOM Nodes. 
  const fragment = document.createRange().createContextualFragment(htmlStr);

  // append the DocumentFragment to the existing element.
  document.getElementById(ph).append(fragment);
}

还有一个链接供那些还不知道DocumentFragment 是什么的人使用。

【讨论】：

尽管如此，这确实是题外话，OP 从未写过innerHTML +=，他们将innerHTML 检索到字符串中，向该字符串添加更多内容，然后将其重新分配给元素。跨度>
@Teemu 这只是表面上的区别。就像return stuff; 和var result = stuff; return result; 之间的区别一样。你能告诉我这两个代码之间的行为有什么区别吗？特别是关于我上面提到的问题。好的，内存分配会略有不同，但这远远超出了 OP 的问题和我的回答。
如果 OP 会在循环中完成element.innerHTML += ...，我会很好地理解答案。但是 OP 并没有保留#ph 中的现有 HTML，元素内容被覆盖（如果有内容，问题就不说了）。但我同意你的看法，对现有元素设置 innerHTML 的唯一合法用途是清空元素。