javascript - 将 insertAdjacentHTML 与 一起使用

Question

我正在尝试使用我自己编写的 chrome 插件修改网页。我想在现有链接之前添加一个附加链接。

我正在使用 insertAdjacentHTML 在原始链接之前添加我的新链接。但是，一旦我使用 a href，它就会失败。

更新正如许多人指出的那样，我的代码中存在语法错误。我修好了这些

这是新代码(但仍然无法正常工作...我想更改的网页似乎永远加载但没有任何反应):

var anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {
   anchors[i].href =   "javascript:void(0)";
   anchors[i].insertAdjacentHTML("beforebegin", "<a href='www.google.de'> bold text</a>")
} 

如果我不添加“a href”，整个代码可以正常工作。所以这有效:

anchors[i].insertAdjacentHTML("beforebegin", "<b> bold text</b>")

如果我尝试使用标签 .. 它会以某种方式失败 - 你能告诉我为什么吗？

更新2我终于能够解决这个问题:我不小心创建了一个无限循环。 @Andy 的回答指出了解决方案。

Answer 1

除了拼写错误外，代码的最大问题是 getElementsByName返回一个 anchor 节点的实时列表。这在适当的情况下可能很有用，但在循环中，每次迭代都会向列表中添加一个新 anchor ，因此循环永远无法完成并且浏览器会挂起。为了防止这种使用 querySelectorAll .它返回一个静态列表。

var anchors = document.querySelectorAll('a');

for (var i = 0; i < anchors.length; i++) {
  const newAnchor = '<a href="www.google.de">bold text</a>';
  anchors[i] = 'javascript:void(0)';
  anchors[i].insertAdjacentHTML('beforebegin', newAnchor);
}

<a href="www.google.com">Google</a>
<a href="www.bert.com">Bert</a>
<a href="www.ernie.com">Ernie</a>

从长远来看，如果您要大量使用 JS 和 HTML 进行编码，您可能会发现始终对 JS 字符串等使用单引号，对 HTML 属性使用双引号会更容易。这样，您必须转义引号的次数就会受到限制。

您还会发现使用像 VSCode 这样的体面的代码编辑器可以帮助您在代码到达浏览器之前看到代码中的拼写错误。