使用insertAdjacentHTML

Question

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

我使用insertAdjacentHTML在原始链接之前添加我的新链接。 但是一旦我使用了一个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>")

如果我尝试标签..某种程度上失败了 - 你能给我一个提示吗？

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

Answer 1

除了拼写错误之外，代码的一个大问题是getElementsByName返回一个锚节点的实时列表 。 这在适当的情况下非常有用，但是在循环中，每次迭代都会向列表中添加一个新锚点 ，因此循环永远无法完成，浏览器也会挂起。 为了防止这种情况，请使用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这样不错的代码编辑器可以帮助您在访问浏览器之前查看代码中的拼写错误。

Answer 2

你有一个拼写错误，你正在设置href：

anchors[i].href =   "javascript:void(0)

你在那里打开了一个字符串而没有关闭它。 只需添加一个"最后。

使用具有一些不错的语法突出显示的文本编辑器可以帮助避免这些类型的问题（尽管JS语法突出显示对于这个特定问题通常有点奇怪）。

如果您在浏览器开发人员工具中查看控制台，您也会看到错误（对于大多数浏览器，按F12打开它们）。

Answer 3

检查你的代码，缺少"和;

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>")
}