KDX KDX - 11 days ago 7
CSS Question

How to inject HTML banner code using Vanilla Javascript?

I have the following block of HTML code which I don't want to alter on a static HTML page:

<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>


Without the use of JQuery, I need to have this implemented using Vanilla Javascript to dynamically inject banner code after every 5, 15, 30 occurrence of
<div class="wrapper"></div>


The increament is starting at 10, and after each occurrence, the next number is previous number plus its increment plus 5.

eg. 5, 15, 30, 50, 75, 105, etc.

Another challenge for me is that I also couldn't figure out how to get the mathematic formula to translate to coding.

A sample banner code to be injected:

<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 resulting outcome would be:

<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 id="banner5"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></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>
<div id="banner15"><ins data-revive-zoneid="456" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>
:
:
:
<div class="wrapper"><img class="lazyload" src="/img/foo30.jpg"></div>
<div id="banner30"><ins data-revive-zoneid="789" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>


How can this be done?

Answer
  • Use [].forEach to iterate all .wrapper elements
  • Use parentNode.insertBefore to insert Element at 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>
<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>

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

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

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

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

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

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

Comments