How do I use InnerHTML to replace a html class with a script? [duplicate]

Question

I'm working on a Chrome Extension and would like to have some part of the website's content be replaced.

So the website's HTML is: <div id="ad" class="ad-container "></div> they have multiple 'id', but the class name remains the same.

The code I want to replace it with is: <script src="link"></script>

I was looking into something called 'InnerHTML", and saw this example: document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi'); but I'm not sure how to replace it with HTML, or change it so it works with a script tag.

Any help?

So, you want to recreate adblock? Why not have a look at their code, its open source... — Rene van der Lende
– Rene van der Lende, Commented May 19, 2020 at 12:54
I think @Liam meant that you are creating a 'some extension' but don't know basic JS, contemplating your final result.... — Rene van der Lende
– Rene van der Lende, Commented May 19, 2020 at 13:04

Loïc · Accepted Answer · 2020-05-19 12:47:20Z

1

That's scary though, be careful doing that.

for(let element of document.querySelectorAll('.ad-container')){
  let script = document.createElement('script')
  script.innerHTML = element.innerHTML
  document.body.appendChild(script)
  element.remove()
}

answered May 19, 2020 at 12:47

Loïc

12k2 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I use InnerHTML to replace a html class with a script? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related