使用insertAdjacentHTML

Question

I am trying to modify a webpage with a chrome plugin I wrote myself. I'd like to add an additional link before a existing link.

I am using insertAdjacentHTML to add my new link before the original link. But as soon as I use the a href it fails.

UPDATE There were syntax errors in my code as many pointed out. I fixed these

This is the new code (but still won't work...webpage I want to alter seems to load forever and nothing happens):

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

Somehow the whole code works, if I don't add "a href". So this works:

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

If I try the tag ..it somehow fails - can you give me a hint why?

Update2 I was finally able to solve this: I accidentally create an infinite loop. @Andy's answer points out a solutions to this.

Answer 1

Aside from the typos the big problem with the code is that getElementsByName returns a live list of anchor nodes . This can be useful in the right circumstances, but with your loop you're adding a new anchor to the list with each iteration so the loop is never able to finish and the browser hangs. To prevent this use querySelectorAll . It returns a static list instead.

 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> 

In the long-run if you're going to be coding with JS and HTML a lot you'll probably find it easier to always use single quotes for JS strings etc, and double quotes for HTML attributes. That way the number of times you'll have to escape quotes will be limited.

You'll also find using a decent code editor like VSCode will help you see the typos in your code before they get to the browser.

Answer 2

You have a typo where you're setting the href:

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

You've opened a string there and not closed it. Simply add a " on the end.

Using a text editor with some decent syntax highlighting can help avoid these sorts of issues (although JS syntax highlighting is often a bit weird for this specific problem).

You would also have seen an error if you viewed the console in your browser developer tools (for most browsers these are opened by pressing F12 ).

Answer 3

Check you code, missing " and ; .

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