element.insertAdjacentHTML 没有将 html 添加到 DOM

Question

下面的代码：

export const showAddedFilesNames = ({
  baseIdentifiers: identifiers,
  inputFileElement,
  container: elementContainer,
  dragContainerDiv,
}) => {
  const paragraphID = identifiers.fileNameParagraphID.slice(1);
  let markup = ``;
  inputFileElement.files.forEach((file, index) => {
    markup += `<p data-index="${index}" id="${paragraphID}"><i class="fas fa-minus-circle mr-2"></i>${
      file.name
    }</p>`;
  });
  elementContainer.insertAdjacentHTML('beforeEnd', markup);
  dragContainerDiv.classList.remove('dragover');
  inputFileElement.value = null;
};

未通过 insertAdjacentHTML 在 ie11 上向 DOM 添加标记（在其他浏览器上完美运行）。当我将 insertAdjacentHTML 中的第一个参数从 'beforeEnd' 更改为 'afterEnd' 时，它以某种方式起作用。此外，当尝试添加静态 html 而不是标记变量时，它也可以工作。

标记是有效的 HTML 代码，我通过控制台日志记录检查了它，这里是从标记变量记录的内容的示例：

<p data-index="0" id="filename"><i class="fas fa-minus-circle mr-2"></i>278893-dfd773dbb6347ccdd47b76138b291193.jpg</p>

如果我尝试将下面的标记添加到标记变量只是一个静态文本，那么它也可以工作...这对我来说很奇怪。

我正在使用 webpack 和 babel 来创建 bundle 和 polyfills 让它在 ie 上工作。

Answer 1

问题出在这行代码中：javascript inputFileElement.value = null； IE11 因为这一行会触发两次更改事件以输入，第二次它会在我的变量标记应该位于的位置添加一个空行。在 chrome 或 firefox 中，该事件只会触发一次。所以我摆脱了那行代码，现在即使在 IE11 中也一切正常。

element.insertAdjacentHTML 没有将 html 添加到 DOM

element.insertAdjacentHTML not adding html to DOM

html

javascript

internet-explorer-11