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