0

我最近发现使用 setInnerHtml 并不是一个好习惯，因为它存在很多性能和安全问题。所以我想知道用“insertAdjacentHTML”替换 setInnerHtml 是否可以？

另外，我应该如何完全重新填满一张桌子？就像删除父元素的子元素，表格主体，并用 insertAdjacentHTML 重新填充它。

我目前在做什么

document.getElementById('myid').innerHTML = "";
const elm = document.getElementById("myid");
elm.insertAdjacentHTML('beforeend', '<div></div>');

这种做法是否违背了使用 insertAdjacentHTML 的目的，因为我仍在使用 innerHTML。当我用 innerHTML 将其设置为空时，我没有进行任何复杂的 DOM 操作，是吗？

4

1 回答 1

2

如果要插入的 HTML 不可信，则insertAdjacentHTML可能允许任意代码执行。

const evilInput = `<img src onerror="alert('evil')">`;
document.body.insertAdjacentHTML('beforeend', evilInput);

在安全性方面，insertAdjacentHTML并没有真正比innerHTML-insertAdjacentHTML有用的是什么时候

  • 容器中的其他元素附加了一个侦听器，并且您不想通过分配来破坏侦听器innerHTML。或者
  • 当你有一个元素的引用并且想要在它旁边插入一些东西而不是采用更长的方法时（例如选择父元素然后使用insertBefore）

另外，我应该如何完全重新填满一张桌子？

将文本内容或设置innerHTML为空字符串，然后选择任何安全的方法重新插入元素都可以。（什么是安全的方法取决于你到底插入了什么。例如，如果它来自你值得信赖的后端，innerHTML并且insertAdjacentHTML都很好 - 使用任何使逻辑最简单的方法）

于 2021-07-03T22:12:00.400 回答