A guide to injecting HTML banner code with pure Vanilla Javascript

Question

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code?

<div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo02.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo03.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo04.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo05.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo06.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo07.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo08.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo09.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo10.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo11.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo12.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo13.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo14.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo15.jpg"></div>

To achieve this using Vanilla JavaScript, you need to inject banner code after every 5th, 15th, and 30th occurrence of

<div class="wrapper"></div>

.

The increase starts at 10 and follows a pattern where each subsequent number is the previous number plus the increment plus 5.

For example: 5, 15, 30, 50, 75, 105, etc.

Additionally, translating this mathematical formula into actual coding can be challenging.

Here's a sample banner code snippet that needs to be inserted:

<div id="banner5"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>

<div id="banner15"><ins data-revive-zoneid="456" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>

<div id="banner30"><ins data-revive-zoneid="456" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>

The desired output would look like this:

[Updated HTML with banner codes injected]

If you're wondering how to handle this task efficiently, keep reading!

javascript html css css-selectors

Answer 1

Answer №1

Utilize the [].forEach method for iterating through all elements with the class .wrapper
Use the parentNode.insertBefore function to add an element at a specific position

var start = 5,
            multiple = 5;
    var elements = document.querySelectorAll('.wrapper');
    [].forEach.call(elements, function (elem, index) {
        var elemt = '<span>' + (index + 1) + '</span>';
        var div = document.createElement('div');
        div.innerHTML = elemt;
        elem.appendChild(div.firstChild);
    });
    var counter = 1;
    [].forEach.call(elements, function (elem, index) {
        var localIndex = index + 1;
        if (localIndex == start) {

            var toAppendHTML = '<div id="banner' + start + '"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>'+start+'\
                    <script async src="//adserver.com/asyncjs.php"><\/script>\
</div>';
            var divElement = document.createElement('div');
            divElement.innerHTML = toAppendHTML;
            insertAfter(divElement.firstChild, elements[index]);
            start += multiple * ++counter;
        }
    });

    function insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

<div class="wrapper">
    <img class="lazyload" src="/img/foo01.jpg">
</div>
<div class="wrapper">
    <img class="lazyload" src="/img/foo02.jpg">
</div>

... (more image wrappers here)

<img class="lazyload" src="/img/foo15.jpg">
</div>

... (more image wrappers here)

<img class="lazyload" src="/img/foo15.jpg">
</div>

Answer 2

Utilize the [].forEach method for iterating through all elements with the class .wrapper
Use the parentNode.insertBefore function to add an element at a specific position

var start = 5,
            multiple = 5;
    var elements = document.querySelectorAll('.wrapper');
    [].forEach.call(elements, function (elem, index) {
        var elemt = '<span>' + (index + 1) + '</span>';
        var div = document.createElement('div');
        div.innerHTML = elemt;
        elem.appendChild(div.firstChild);
    });
    var counter = 1;
    [].forEach.call(elements, function (elem, index) {
        var localIndex = index + 1;
        if (localIndex == start) {

            var toAppendHTML = '<div id="banner' + start + '"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>'+start+'\
                    <script async src="//adserver.com/asyncjs.php"><\/script>\
</div>';
            var divElement = document.createElement('div');
            divElement.innerHTML = toAppendHTML;
            insertAfter(divElement.firstChild, elements[index]);
            start += multiple * ++counter;
        }
    });

    function insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

<div class="wrapper">
    <img class="lazyload" src="/img/foo01.jpg">
</div>
<div class="wrapper">
    <img class="lazyload" src="/img/foo02.jpg">
</div>

... (more image wrappers here)

<img class="lazyload" src="/img/foo15.jpg">
</div>

... (more image wrappers here)

<img class="lazyload" src="/img/foo15.jpg">
</div>

Answer 3

Answer №2

Give this a shot ;)

<div class="container"><img class="lazyload" src="/img/image01.jpg"></div>
<div class="container"><img class="lazyload" src="/img/image02.jpg"></div>
<div class="container"><img class="lazyload" src="/img/image03.jpg"></div>

...

<script>
  var containers = document.getElementsByClassName('container');
  for(var i in containers)
  {
    if(i > 9)
    {
      if(i%5 == 0)
      {
        var div = document.createElement('div');
        div.id  = 'banner'+i;
        div.innerHTML = '<ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>';
        containers[i].parentElement.insertBefore(div, containers[i]);
      }
    }
  }
</script>

Answer 4

Give this a shot ;)

<div class="container"><img class="lazyload" src="/img/image01.jpg"></div>
<div class="container"><img class="lazyload" src="/img/image02.jpg"></div>
<div class="container"><img class="lazyload" src="/img/image03.jpg"></div>

...

<script>
  var containers = document.getElementsByClassName('container');
  for(var i in containers)
  {
    if(i > 9)
    {
      if(i%5 == 0)
      {
        var div = document.createElement('div');
        div.id  = 'banner'+i;
        div.innerHTML = '<ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>';
        containers[i].parentElement.insertBefore(div, containers[i]);
      }
    }
  }
</script>

Answer 5

Answer №3

To help kickstart your project:

You have the option to utilize document.getElementsByClassName for selecting elements by class name:

var boxes = document.getElementsByClassName('box');

You can also make use of Element.insertAdjacentHTML to add HTML into the DOM following an element:

anotherBox.insertAdjacentHTML(
    'beforebegin',
    '<p id="importantText">This is some important text.</p>'
);

Answer 6

To help kickstart your project:

You have the option to utilize document.getElementsByClassName for selecting elements by class name:

var boxes = document.getElementsByClassName('box');

You can also make use of Element.insertAdjacentHTML to add HTML into the DOM following an element:

anotherBox.insertAdjacentHTML(
    'beforebegin',
    '<p id="importantText">This is some important text.</p>'
);

A guide to injecting HTML banner code with pure Vanilla Javascript

Answer №1

Answer №2

Give this a shot ;)

Answer №3

Similar questions

You are unable to align a paragraph with a specific width in the center

Failure to load image logo when refreshing the page

Several iFrames embedded on the website automatically adjust to the same pre-set height

Is there a way to stop TD from going to the next line?

Increase in JQuery .ajax timeout not effective

When running npm install, the dist folder is not automatically generated

Obtain specific fields from a multidimensional array object using lodash

Using Laravel to connect custom fonts

The Toggle Functionality necessitates a double-click action

Remove an element from an array within an object stored in a MongoDB document

Does the CSS overflow property affect the borders of an element?

What advantages does incorporating a prefix or suffix to a key provide in React development?

Having trouble getting Typescript code to function properly when using commonjs style require statements

Leveraging the power of beautifulsoup and selenium for web scraping on a multi-page site results in gathering a

Transform Typescript into compiled css files without using any additional tools

Remove the 'name' attribute from the input tag within the URL

Allow Vue to handle the registration of the datepicker event

Is there a more effective method for positioning items in a navigation bar other than using padding-left?

What is the process of exporting a module assigned to a variable in JavaScript?

Python code allowing users to navigate back to the previous page while retaining elements